DojoCampus » Blog Archive

Posted in Dojo Cookies

dnd.Moveable

I like widgets you can create in bulk, from valid markup. Quickly, I’m going to show you how to use query() and dojo.dnd.Moveable to create a set of dragable “magnets” on the screen.

Start with some basic CSS:

span.magnet {
    padding:3px;
    border:2px solid #ccc;
    background:#fff;
}

and in your HTML, several span’s class:

<div id="holder">
    <span>One</span> <span>Two</span> <span>Three</span>
</div>

Then, in script, we find and convert those spans to dragable objects:

// require dojo.dnd stuff:
dojo.require("dojo.dnd.Moveable");
// page ready
dojo.addOnLoad(function(){
    // get every "span" in node id="holder"
    dojo.query("span","holder")
          // add "magnet" class
         .addClass("magnet")
         // make each node moveable:
         .forEach(function(node){
               new dojo.dnd.Moveable(node);
          });
});

And all of the rest of the work should be done for you. You should have three dragable nodes:

One Two Three