ExtJS拖拽效果

来源：互联网发布：网络女歌手排行榜编辑：程序博客网时间：2024/05/22 00:54

ExtJS拖拽效果

<html>    <head>        <title>hello</title><meta http-equiv="content-type" content="text/html;charset=utf-8">        <link rel="Stylesheet" type="text/css" href="http:10.19.1.55/lib/extjs/resources/css/ext-all.css" />        <script type="text/javascript" src="http:10.19.1.55/lib/extjs/bootstrap.js"></script><script type="text/javascript" src="http:10.19.1.55/lib/extjs/locale/ext-lang-zh_CN.js"></script><style type="text/css"></style>        <script type="text/javascript">            Ext.onReady(function(){var drags=document.getElementsByTagName('li');for(var i=0;i<drags.length;i++){Ext.dd.Registry.register(drags[i]);}new Ext.dd.DragZone('today');new Ext.dd.DragZone('tmrw');function drop(dropNodeData,source,event,dragNodeData){var dragged=source.dragData.ddel;var sourceContainer=source.el.dom;var desContainer=this.getEl();sourceContainer.removeChild(dragged);desContainer.appendChild(dragged);return true;}var cfg={onNodeDrop:drop};new Ext.dd.DropZone('today',cfg);new Ext.dd.DropZone('tmrw',cfg);            })        </script>    </head>    <body><h1>Today</h1><ul id="today"><li>shopping</li><li>haircut</li></ul><h1>Tomorrow</h1><ul id="tmrw"><li>123</li><li>456</li></ul>    </body></html>