This example demonstrates how to create a list that can have the order changed with the Drag & Drop Utility.
The YUI Drag & Drop Utility lets you make HTML elements draggable.
In this example, list reordering is implemented by extending
YAHOO.util.DDProxy instead of
YAHOO.util.DD so that we can use the source element as the "insertion point". When the
drag starts, the proxy element style and content is adjusted to match the
source element, and
visibility:hidden is applied to the source element.
To facilitate dragging into an empty list, we make the two list elements
DDTargets. When interacting with the list items, we will get two notifications
(one for the list, one for the list item). We ignore all
dragOver events that
happen on the list and ignore all
dragDrop events unless the drop was in the
list's negative space (not over another list item).
Create the elements:
Now we create the instances of
YAHOO.util.DDProxy, passing the element ids or references for our demo elements.
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.