dojo/dnd is one of Dojo’s core APIs and is designed to manage the process of dragging and dropping items between two or more containers. It offers advanced features like multiple selections, item acceptance filtering on drop targets, and other behavioral tweaks. Let’s learn how to use it!
This is an updated version of the original article, Dojo Drag and Drop, Part 1, published in 2008.
Tags: dnd, dojo.dnd
Posted in Dojo | 3 Comments
During the interaction design phase, we determined that Netflix’s current drag and drop reordering feature was well thought out — so we set out to create the same reordering behavior in Queued. As Revin mentioned before, we also wanted to keep Queued as light as possible; because of this, we decided early on to not use any of the Dijit infrastructure to create the queue listings. Not only that, but the Dojo Grid would not work for the queues because it doesn’t support drag and drop reordering of rows. This meant we would have to come up with something which would be flexible (yet fast) to render the queue.
In the user interface design phase, we decided that each of the lists in the “Your Queue” section would be based on HTML tables. In Queued, only the DVD queue and the Instant list can be reordered, so we’ll focus on the DVD queue.
Tags: dnd
Posted in Dojo, JavaScript, air, queued | 9 Comments
A frequently overlooked and underused feature of Dojo’s Drag-and-Drop (DnD) module is drag handles.
DnD is commonly implemented as a set of draggable elements where the entire DnD item (usually a subtree of DOM nodes) can detect the drag action. In some cases, this is not desirable:
Tags: dnd, dojo.dnd, drag and drop, drag handles
Posted in Dojo, UI Design | 6 Comments
Most anyone who’s looked at the feature list knows that one of Dojo’s core features is a drag and drop framework. What’s not immediately obvious is that Dojo actually has two drag and drop APIs. The first, dojo.dnd, is designed to manage the process of dragging items between two or more containers, including multiple selection, item acceptance filtering on drop targets, and other behavioral tweaks. The second API, dojo.dnd.move, is a bit lower-level in scope; it’s designed to manage the process of moving single objects around, without the concept of attaching items to containers. Both of these are very useful features to have at your disposal. In this article, we’ll cover dojo.dnd.
Tags: dnd, Dojo, drag and drop
Posted in Dojo, JavaScript, docs | 59 Comments