[code]
<!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>
<title>Untitled Page</title>
<link rel="Stylesheet" type="text/css" href="../ext/eresources/css/ext-all.css" />
<script type="text/javascript" src="../ext//adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext//ext-all-debug.js"></script>
<script type="text/javascript" src="../ext/build/locale/ext-lang-zh_CN.js"></script>
<style type="text/css">
body{font-size:12px;margin: 10px;}
.block {
border: 1px red solid;
height:80px;
margin-top:50px;
padding:20px 0 0 20px;
clear:both;
}
.item {
border: 1px #000 solid;
margin-right:10px;
width: 60px;
height: 40px;
text-align:center;
padding-top:20px;
color:White;
float:left;
cursor:pointer;
}
</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());
var sColor = srcEl.dom.id.split('_')[1]; //得取拖动源id的后面一部分，即proxy_red后面的red
destEl.dom.style.backgroundColor = sColor; //设置目标id的背景色
};
proxy_green.afterDragDrop = proxy_red.afterDragDrop; //为其它拖动源赋值同样的事件处理函数
proxy_black.afterDragDrop = proxy_red.afterDragDrop;
var target = new Ext.dd.DDTarget('target', 'dd'); //建立拖动目标区(这里的dd与上面拖动源的group:dd相同
//只有相同group的DDProxy/DragSource才会接受)
});
</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>
<div id="target" class="block">把上面有颜色的色块拖到我这里试试</div>
</body>
</html>
[/code]
