先看看实际效果。图片展示的是基于 ExtJS 实现的一个拖拽交互实例：一个典型的双列待办事项面板，用户能够轻松将任务条目在“今天”与“明天”两个列表之间来回拖拽。其实背后的核心逻辑并不复杂，下面直接给出完整的代码，关键部分已做了精简处理。 ```html

Today

• shopping
• haircut

Tomorrow

• 123
• 456

``` 整个流程的脉络非常清晰：先用 `Ext.dd.Registry.register` 将页面中所有列表项注册为可拖拽元素，接着分别为两个列表容器创建 `DragZone` 和 `DropZone` 实例。拖放的核心行为定义在 `drop` 函数里——当某个条目被拖放到目标容器时，直接从原容器移除该元素，再追加到目标容器底部。这样一来，只要将两个容器的 `onNodeDrop` 事件都指向同一个 `drop` 函数，双向拖拽的逻辑便自动生效。 对于刚接触 ExtJS 拖拽功能的开发者来说，这个示例具有很高的参考价值。它没有依赖复杂的配置，仅用几个核心 API 便实现了可交互的拖放效果。在实际项目中，完全可以以此为基础，进一步扩展为更复杂的看板或任务管理工具，例如增加分类、排序或数据持久化等功能。