萬盛學電腦網 >> 腳本專題 >> javascript >> ExtJS的拖拽效果示例
ExtJS的拖拽效果示例
拖拽效果想必大家都有見到過吧，實現方式大同小異，在接下來的文章中為大家詳細介紹下使用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>javascript排行
程序編程推薦
相關文章
- CSS中使用expression表達式的方法
- 保護 SQL Server 2005 Express Edition Serve…
- EditTextPreference組件使用方法
- 獲取Gridview中ButtonField的text屬性
- java sqlserver text 類型字段讀取方法
- Excel導入SQL Server表的方法
- CSS層疊zindex設置方法介紹
- PopupControlExtender（彈出窗口）的用法
- vs2012中使用Spring.NET報錯：Spring.Context.Sup…
- Mysql教程：將txt文本中的數據輕松導入MySQL表中的方法
- ASP編程之ActiveX 組件
copyright © 萬盛學電腦網 all rights reserved