Using default settings as we have, the user can drag items all over the page. They may have to try several potential drop before stumbling on the right one. You can help them out by limiting their choices.

Disabling Drop Targets for Certain Sources

Continuing from our example, suppose that chicken legs can go into all destinations: the oven, the pot, or the frying pan. But eggs can go only into the pot or pan, not in the oven. (Yes there is such a thing as baked eggs, but you're not Wolfgang Puck!)

That's where the "dest" parameter comes in. The second argument for both HtmlDragSource and HtmlDropTarget, this acts much like the name="..." parameter of radio buttons. They tie different drop sources with a common set of rules.

In the following example, we set up two destination groups: allCookingOptions, and topOfStoveOnly. The HTML portion is exactly like our first example, but we change initKitchen to:

    function initKitchen(){

        // A pan can be a drop target for any drag source of type topOfStoveOnly or

        // allCookingOptions.

        new dojo.dnd.HtmlDropTarget(dojo.byId("pan"), ["allCookingOptions","topOfStoveOnly"]);

        new dojo.dnd.HtmlDropTarget(dojo.byId("pot"), ["allCookingOptions","topOfStoveOnly"]);

        new dojo.dnd.HtmlDropTarget(dojo.byId("oven"), ["allCookingOptions"]);



        // An egg can only be dropped on a target of type topOfStoveOnly

        new dojo.dnd.HtmlDragSource(dojo.byId("egg"), "topOfStoveOnly");

        new dojo.dnd.HtmlDragSource(dojo.byId("leg"), "allCookingOptions");

    }

You may wonder, "Why the brackets around destinations in a drop target?" Drag sources belong to one and only one group, but drop targets can belong to many groups. That's why drop targets always have an array of destinations signified by [...], even when there's only one group.

Constraining The Drag Area

To make the User Interface more discoverable, you can put a boundary around all the possible drop targets.  This prevents the drag source from leaving the area, even if the mouse is dragged outside. The technique is especially helpful if you have two or more sets of drag and drop areas. For example, if you had a drop area of domestic cities and a drop area of international cities, you could constrain domestic planes (our drag source) to the domestic cities.ÂÂ

  function initKitchen(){
     ... // Construct drop sources

     // Keep the egg from leaving the boundaries of the object kitchenDiv
     var eggSource = new dojo.dnd.HtmlDragSource(dojo.byId("egg"), "dest");
     eggSource.constrainTo("kitchenDiv");

     // Do the same with the chicken leg
     legSource = new dojo.dnd.HtmlDragSource(dojo.byId("leg"), "dest");
     legSource.constrainTo("kitchenDiv");
  }

...
<H1>Destinations </H1>

<div id="kitchenDiv">
   <div id="pan" ...