DragModule

Drop Targets

Overview

I'm going to show you how to add a drop target to a drag object. This will allow the drag object to be dropped onto the drop target which will cause the drop target's ondrop event handler to fire.

function init() {
   var folder = DragObj.getInstance(document.getElementById("folder"));
   var trashTarget = folder.addDropTarget(document.getElementById("trash"));
 	
    trashTarget.ondrop = function(e) {
      alert("You hit: " + e.dropTarget.id);
  };
}

In this example, you can see that after getting a DragObj instance, I call addDropTarget and pass an object reference of the element to be a dropTarget.

dropTarget .ondrop(e, dragObject)

The ondrop handler is passed event, and the dragObject that hit the target.

After the drag object has notified all of it's dropTargets, the globally-accessible, DragHandlers.dO variable is set to null.

Remove a Drop Target

If you want to disallow a user from repeatedly dragging onto an object, you can remove the dropTarget by calling removeDropTarget(oElement).

Next in this tutorial: Adding a Handle