While the previous examples are interesting in the abstract sense—they give us an idea of how the Ext JS drag-and-drop system works—they aren't going to be setting your newest development alight. For that, we need to consider how multiple drag targets and drop targets can interact, and how we can set up more complicated systems for dragging around items of data.
We've seen how to hook up a single draggable item, but often, you'll want to have a number of elements ready to be moved around the screen. The solution here is to use Ext.dd.DragZone and Ext.dd.DropZone to enable the movement of multiple nodes. We're going to replicate a simple to-do list application, which will allow the user to move items from one list to another. However, this functionality will be seriously limited, allowing us to focus only on the relevant topics. First, we need to set up some basic HTML:
<h1>Today</h1> <ul id="today...