Detecting position with drag-and-drop and jQuery?

Question

Hi, I need to know how to detect the position of a dragged item as opposed to other divs. I need to detect whether an item is dropped outside of two different divs. (I am building a mac dock type start page and I need to know how to do this so I can delete icons by dragging them off the bar.)

Any help would be greatly appreciated.

Answer 1

You can use a combination of draggable and droppable from jquery ui. Set your toolbar as droppable and your icons as draggable like this:

var deleteClass = 'deleteMe';

$('div.toolbar').droppable({
    out:function(event, ui){
        ui.draggable.addClass(deleteClass);
    },
    over:function(event,ui){
        ui.draggable.removeClass(deleteClass);
    }
});​​​​​​​​​​​​​​​​​​​​

$('div.icon').draggable({
    helper:'clone',
    revert:'valid',
    opacity:.5,
    stop: function(event,ui){
        if($(this).hasClass('deleteMe')){$(this).fadeOut();}
    }    
});

Basically the work is in the events. Out and over events of the droppable toolbar add and remove a class on the icon that we can use as a flag to know when the icon is not over the toolbar. The stop event on the draggable icon then lets us remove the icon if it is not over the toolbar. You can try it out with this jsFiddle. I'm sure the same could also be done using the jquery ui sortable widget so you could also let your users re-arrange icons if they want.