ExtJS drag result example
You may have seen the drag and drop effects. The implementation method is similar. In the following article, I will introduce how ExtJS is used.
The Code is as follows:
<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 ('lil ');
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
<Ul id = "today">
<Li> shopping </li>
<Li> haircut </li>
</Ul>
<H1> Tomorrow
<Ul id = "tmrw">
<Li> 123 </li>
<Li> 456 </li>
</Ul>
</Body>
</Html>