Dojo DND – how to cancel drag and drop in dojo

2 min read >

Dojo DND – how to cancel drag and drop in dojo

Engineering Insights & Web Platforms

How can one cancel the drag and drop operation in dojo, based on conditions specific to the application? I’ve seen this question asked several times and few if no answers, so I thought I might post my solution here.
The basic idea is to connect to the accepted event from a dojo.dnd.DropTarget uses the around advice which lets you control the output of the accepted method (more details here).

Here’s a code snippet:

dojo.event.connect(“around”, myDropTarget, “accepts”, “acceptsDrop”);

Inside your acceptsDrop function you can cancel the DND operation using your own custom conditions:

function acceptsDrop(invocation) {

    var dragObjects = invocation.args[0];

    for (var x = 0; x < dragObjects.length; x++) {

        // if some condition related to dragObjects is true

       if(dragObjects[x].domNode.getAttribute(“someAttribute”) == “someValue”) {

          // returning false will result in cancelling the drag and drop

         return false;

        }

    }

    // returning true will allow the drag and drop operation to continue

    return true;

}

Enjoy!