您的位置：首页 > Web前端 > JavaScript

Extjs 拖拽实验例子

2013-05-03 14:26 351 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>拖拽实验</title>



<link rel="Stylesheet" type="text/css" href="../resources/css/ext-all.css" />

<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="../ext-all-debug.js"></script>

<script type="text/javascript" src="../build/locale/ext-lang-zh_CN.js"></script>



<style type="text/css">

body{

font-size:12px;margin: 10px;

}

.block {

clear:left;

margin-top:50px;

border: solid 1px #000;

height:160px;

padding:20px 0 0 20px;

}

.item {

border: 1px #000 solid;

margin-right:10px;

width: 60px;

height: 40px;

text-align:center;

padding-top:20px;

color:White;

float:left;

cursor:pointer;

}

.BorderOver{

border:dashed 2px #00f;

}

</style>

</head>

<body>

<script type="text/javascript">

Ext.onReady(function() {

var proxy = new Ext.dd.DDProxy("proxy");//这一句就可以建立一个随便拖的东东，神奇吧

//(ExtJs的拖动组件分二大类，DDProxy就是要拖动的东西，而DDTarget就是拖动后可以扔进去的目标容器区)

//以下建立了三个拖动源DropSource(继承自DDProxy可以查看官方文档)，并标明gruop为dd

var proxy_red = new Ext.dd.DragSource('proxy_red', {group:'dd'});

var proxy_green = new Ext.dd.DragSource('proxy_green', { group:'dd' });

var proxy_black = new Ext.dd.DragSource('proxy_black', { group:'dd' });

//拖动完成的事件

proxy_red.afterDragDrop = function(target, e, id) {

var destEl = Ext.get(id);

var srcEl = Ext.get(this.getEl());

if (destEl.dom.id == "target2") {

if (srcEl.dom.id != "proxy_red") {

destEl.dom.style.border = "solid #000 1px";

alert("此区域仅接受red(红色)色块！");

return false;

}

}

var sColor = srcEl.dom.id.split('_')[1]; //得取拖动源id的后面一部分，即proxy_red后面的red

//destEl.dom.style.backgroundColor = sColor; //设置目标id的背景色

//destEl.dom.style.border = "solid #000 1px";

var beginX = destEl.getX(); //目标区块的X轴初始坐标

var beginY = destEl.getY(); //目标区块的Y轴初始坐标

var eXY = e.getXY();

var dragtargetX = eXY[0];

var dragtargetY = eXY[1];

var X = dragtargetX - beginX;

var Y = dragtargetY - beginY;

alert("x:"+X);alert("y:"+Y);

var TextField35378 = new Ext.form.TextField({id:"TextField35378",

labelSeparator:":" ,labelStyle:"text-align:right",

inputType: 'text', name: '姓名',

allowBlank: true,

fieldLabel: '姓名',

hidden: false, hideLabel: false,

width: 120, x: X, y: Y});

Designer.formPanel.add(TextField35378);

Designer.formPanel.doLayout();

//Designer.target.add(TextField35378);

//Designer.target.doLayout();

//alert(destEl.getX());

};

proxy_red.onDragEnter = function(e, id) {

Ext.get(id).dom.style.border = "dashed #00f 2px";

Ext.get(id).dom.style.backgroundColor = "#fff";

}

proxy_red.onDragOut = function(e, id) {

Ext.get(id).dom.style.border = "solid #000 1px";

}

//为其它拖动源赋值同样的事件处理函数

proxy_green.afterDragDrop = proxy_red.afterDragDrop;

proxy_black.afterDragDrop = proxy_red.afterDragDrop;

proxy_green.onDragEnter = proxy_red.onDragEnter;

proxy_black.onDragEnter = proxy_red.onDragEnter;

proxy_green.onDragOut = proxy_red.onDragOut;

proxy_black.onDragOut = proxy_red.onDragOut;

var target = new Ext.dd.DDTarget('target', 'dd');

//建立拖动目标区(这里的dd与上面拖动源的group:dd相同

//只有相同group的DDProxy/DragSource才会接受)

var target2 = new Ext.dd.DDTarget('target2', 'dd');

Designer.uxForm();

});

</script>

<script language="javascript">

Ext.namespace('Designer');

Designer.uxForm = function (){

var formPanel = new Ext.form.FormPanel({

id:'formpanelid',

header:false,

frame:true,

border:false,

layout:"absolute",

width :600,

height :400,

renderTo:"uxform"

});

Designer.formPanel = formPanel;

var formPanelDropTargetEl = formPanel.body.dom;

var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {

id:'targetid',

group : 'dd',

notifyEnter : function(ddSource, e, data) {

//Add some flare to invite drop.

//formPanel.body.stopFx();

//formPanel.body.highlight();

},

notifyDrop : function(ddSource, e, data){

// Reference the record (single selection) for readability

//var selectedRecord = ddSource.dragData.selections[0];

// Load the record into the form

//formPanel.getForm().loadRecord(selectedRecord);

// Delete record from the grid. not really required.

//ddSource.grid.store.remove(selectedRecord);

//return(true);

}

});

Designer.target = formPanelDropTarget;

}

</script>

<div>

<div id="proxy_red" class="item" style="background:red">Red</div>

<div id="proxy_green" class="item" style="background:green">Green</div>

<div id="proxy_black" class="item" style="background:black">Black</div>

<div id="proxy" class="item" style="color:Black">我可以<br/>随便拖</div>

</div>

<br/>

<div id="uxform" style="margin-left:200px;margin-top:120px"></div>

<br/>



</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航