Basic Drag and Drop

The YUI Drag and Drop Utility lets you make HTML elements draggable.

For this example, we will enable drag and drop for the three <div> elements.

Create the demo elements:

Now we instantiate three YAHOO.util.DD instances. By default, a mousedown on any part of source element would start a drag operation. We use setHandleElId to make it so that only a specific area or areas of the source element will start a drag when clicked.

Elements that are not a child of the source element can be used as drag handles by using setOuterHandleElId. <script type="text/javascript"> (function() { var dd, dd2, dd3; YAHOO.util.Event.onDOMReady(function() { dd = new YAHOO.util.DD("dd-demo-1"); // Configure one or more child element as a drag handle dd.setHandleElId("dd-handle-1a"); dd.setHandleElId("dd-handle-1b"); dd2 = new YAHOO.util.DD("dd-demo-2"); dd2.setHandleElId("dd-handle-2"); dd3 = new YAHOO.util.DD("dd-demo-3"); dd3.setHandleElId("dd-handle-3a"); // A handle that is not child of the source element dd3.setOuterHandleElId("dd-handle-3b"); }); })(); </script>