19、Ext JS 拖放功能全解析

Ext JS 拖放功能全解析

1. 多拖放目标交互

在实际开发中，我们常常需要考虑多个拖放目标之间的交互，以及如何构建更复杂的数据拖放系统。下面我们通过一个简单的待办事项列表应用来详细说明。

1.1 基本 HTML 结构

首先，我们需要设置一些基本的 HTML 结构，代码如下：

<h1>Today</h1>
<ul id="today">
   <li>Shopping</li>
   <li>Haircut</li>
</ul>
<h1>Tomorrow</h1>
<ul id="tmrw">
   <li>Wash car</li>
</ul>

这里我们有两个列表，一个 ID 为 today ，另一个 ID 为 tmrw ，用户可以在这两个列表之间移动项目，以模拟重新组织未来几天的任务。

1.2 设置 DragZone

接下来，我们使用 Ext.dd.DragZone 将这些列表设置为可拖动项目的容器。注意，JS 代码需要放在 Ext.onReady 调用中。代码如下：

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