Search code examples
jquerydraggabledroppable

jquery revert dragging if droppable already contains that element

I am facing the dragging problem. Here's the fiddle. http://jsfiddle.net/dJyUQ/16/

There are 4 boxes (A, B, C, D) and all are droppables. ".item" div is draggable and can be dropped on any of the 4 droppables.

I want just one copy of item to be dropped on one droppable. So that when I attempt to again drop copy of item on the same droppable it wouldn't allow me. Currently I have inserted an alert. But I want to cancel or revert dragging.

Please help me as I think I am missing something. I searched jquery ui dragging and droppable plugin but could not find anything.

Solution

  • Change your drop code to be this:

    drop: function(event, ui){
    if($(this).children(".itemcopy").size() > 0) {
        alert("cancel");    //Instead want to cancel dragging of item
        return false;
    }
    $(this).append("<div class='itemcopy'>"+ui.draggable.html()+"</div>");        
}

    http://jsfiddle.net/dJyUQ/18/