Customizing default drag and drop behaviour of Scriptaculous/Mochikit

Click here to see the demo.

Drag and drop is still one of the most flashy and practically difficult to implement feature of today's web applications. There are many good implementations available today.Dojo toolkit's implementation of drag and drop, in my opinion is one of the best. Having worked a bit with it , I wanted to try out other options. So, I had a look at Mochikit. The drag and drop (DnD) functionality in Mochikit has been taken from another famous javascript toolkit called 'script.aculo.us'. So this article applies to both.

The basic DnD functionality is easy to understand and code. But I soon discovered something, which, I think is a short coming. The default functionality does not allow elements(nodes) to be moved from one container to another.It seems you can't achieve a slotted DnD behaviour. For example, if we have two DIVs, and I want to drag an image and drop it into another DIV. This image should be erased from original DIV and show on new one. Also, if I tried to drag this image to some other region outside both the DIVs, it should 'revert' back to original position.

I couldn't find examples on the internet where this had been accomplished using default functionality. It seems additional code needs to be written. To make a draggable object to come to it's original position, the 'revert' option needs to be set true. The problem here is that a 'revert' is still executed , if you drop on correct target. There is an example of shopping cart application on script.aculo.us website. Though this may be just fine for a shopping cart, but at other places it would be nice to kill the 'revert' operation on successful drop. And this, I believe should be the default functionality of DnD, which the programer should be able to override.

I have created a sample page which demonstrates the altered DnD functionality. I have customized it by wiring code to 'ondrop' event. There are three DIVs. One holds only 'blue' cards, another only 'red' cards and the third one can hold all cards. You can drag and drop cards from one DIV to another. However, only when you try to drop a card onto a DIV which can't accept it, it flies back to its original position.

Click here to see the demo.

//Function that copies nodes from source to destination
//on succesfull drop.
function DropHandler(element,el)
{
    var newnode  = document.createElement('img'); 
    var classname = element.className;
    newnode.src="images/"+classname+"card.jpg";
    newnode.id = 'A'+Math.random();  
    addElementClass(newnode,classname );
    $(el).appendChild(newnode);
    new Draggable(newnode.id,{revert:true});
    element.parentNode.removeChild(element);
    $('log').value ="Element '"+element.id+"' dropped on '"+el+"' ."; 
}


//Creates  4 Draggables and 3 Droppables
function SetDND()
{
  new Draggable('b1',{revert:true});
  new Draggable('b2',{revert:true});
  new Draggable('r1',{revert:true});
  new Draggable('r2',{revert:true});

  new Droppable('allcards', {
    accept: ['blue','red'], 
    ondrop:function(e){DropHandler(e,'allcards')}
  });

  new Droppable('redcards', {
    accept: ['red'],
    ondrop:function(e){DropHandler(e,'redcards')}
  });

  new Droppable('bluecards', {
    accept: ['blue'], 
    ondrop:function(e){DropHandler(e,'bluecards')}
  });
}



Copyright (c) 2007-2014 Ashish Patil . Please read FAQ for more details.

comments powered by Disqus