CODEWITHSUNDEEP
jquerydraggabledroppable
Ashwin
Ashwin

Reputation: 12411

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.

Upvotes: 0

Views: 2691

Answers (3)

DDK
DDK

Reputation: 1038

change the drop code to the following

drop: function(event, ui){
               if(!($(this).children(".itemcopy").size() == 1)) {
                 $(this).append("<div class='itemcopy'>"+ui.draggable.html()+"</div>");   
        }
    }

Upvotes: 1

JMax
JMax

Reputation: 26591

You can use this trick from this blog article: using revert: function(socketObj)

Here is a working example: http://jsfiddle.net/dJyUQ/16/

[EDIT] Richard's answer is far better. I'll leave my answer for the use of a function within the revert method (I found this was a good idea though, have a look at the article).

Upvotes: 1

Richard Dalton
Richard Dalton

Reputation: 35793

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/

Upvotes: 3

Related Questions