Question

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.

Answer 1

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/