Drag and Drop

 

 

Drag test: All three squares can be dragged, and are drop targets

Always on top: Same as the drag test, except the object being dragged is displayed on top of the others.

Proxy drag: The actual element is not moved during a drag operation. Instead, an absolutely positioned div (created once for all instances) is resized to the dimensions of the linked element and moved to the location of the drag operation.

Sortable list: When a list item is dragged past the center of another list item, it is inserted before that item. The items in the first two columns can interact with items in the other column. The items in the third column are defined as a separate group, so they can only interact with other items in the third column.

Multiple drag handles: Shows how you can create multiple "hot spots" on your draggable item.

Targetable afforance: Demonstrates how multiple interaction groups and the events exposed by the utility can be used to provide user feedback during the drag.

Grid: Demonstrates the graduated movement feature of drag and drop.

Resize: Demonstrates one approach to creating a draggable and resizable module.

Custom Click Validator: In this example, we override clickValidator to provide custom logic for determining if the initial mousedown should initiate a drag. A drag is initiated only if the mousedown happens inside of the circle.