مثال على تأثير السحب والإسقاط ExtJS

معلومات عن المنتج:

<أتش تي أم أل>

<الرأس>

<العنوان>مرحبا</العنوان>

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

<نمط النوع = "نص/CSS">

</نمط>

<نوع البرنامج النصي = "نص/جافا سكريبت">

تحويلة على استعداد (وظيفة () {

var Drags=document.getElementsByTagName('li');

ل(var i=0;i<drags.length;i++)

{

Ext.dd.Registry.register(drags[i]);

}

new Ext.dd.DragZone('اليوم');

new Ext.dd.DragZone('tmrw');

إسقاط الوظيفة (dropNodeData، المصدر، الحدث، DragNodeData)

{

var Dragged=source.dragData.ddel;

var sourceContainer=source.el.dom;

var desContainer=this.getEl();

sourceContainer.removeChild(drag);

desContainer.appendChild(drag);

عودة صحيحة؛

}

var cfg={onNodeDrop:drop};

new Ext.dd.DropZone('today',cfg);

new Ext.dd.DropZone('tmrw',cfg);

})

</script>

</الرأس>

<الجسم>

<h1>اليوم</h1>

<ul معرف = "اليوم">

<li>التسوق</li>

<li>قص الشعر</li>

</ul>

<h1>غدًا</h1>

<ul id="tmrw">

<li>123</li>

<li>456</li>

</ul>

</الجسم>

</html>