extjs使div实现鼠标拖放效果很简单,一句话就可以搞定:
var proxy = new Ext.dd.DDProxy("search_div");
search_div为我网页里div的id号。
这样,id为search_div的div元素就可以实现用鼠标拖动的效果了。
以下是摘自网上一拖放div 效果代表:
[www.cn-web.com]
< 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 >
责任编辑:襄阳网站建设