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>