Drag & Drop

dizmoViewer supports drag and drop. If a dizmo is moved across the viewer, dragStart and dragEnd Events are generated. Your dizmo can listen and react to those.

dizmo.onDragStart(function() {
        // the dizmo has started to be dragged by the user
});

dizmo.onDragEnd(function() {
     // the dizmo has stopped being dragged by the user
});

Note: While the onDragEnd is called directly when the drag ends, the dizmo could still be moving over the screen (e.g when flicked). If you want to check for a new parent after the user has dragged the dizmo, you’ll want to subscribe to onParentChanged instead, as the parent will only be updated after the dizmo has stopped moving.

dizmo.onParentChanged(function(){
        //  check the new position of the dizmo
});

What if you want to limit which other dizmo your dizmo can be dragged to and undo the dragging if it was not the correct one?

First, save the current absolute position of the dizmo when the drag operation starts

dizmo.onDragStart(function() {
        old_pos.x=dizmo.getAttribute("absolutegeometry/x");
        old_pos.y=dizmo.getAttribute("absolutegeometry/y");
});

Then, when the dizmo has a new parent, check if it’s not the workspace and then, if the bundleid attribute of the parent dizmo is the Pad. If not, set the Parent of the dizmo to the workspace and then move it back to the original position.

dizmo.onParentChanged(function(){
        //  check the new position of the dizmo
        var p=dizmo.getParentDizmo();
        if (p) {
            var b=p.getAttribute("bundleid");
            if (b!=='com.dizmo.pad_ng') {
                dizmo.setParentDizmo(null);
                dizmo.beginAttributeUpdate("geometry");
                dizmo.setAttribute("geometry/x",old_pos.x);
                dizmo.setAttribute("geometry/y",old_pos.y);
                dizmo.endAttributeUpdate("geometry");
            }
        }
});

Now, your dizmo moves back to its original position when it’s not dragged to a Pad.