Sample drag and drop effects for ExtJS

  • 2020-03-30 00:45:52
  • OfStack

 
<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> 

Related articles: