CODEWITHSUNDEEP
jqueryjquery-uidrag-and-drop
Vidia
Vidia

Reputation: 43

how to restrict the droppable in jquery drag/drop?

is it possible to restrict the droppable area.

I want my draggable to revert back if its not completely in the draggable. here is the fiddle. http://jsfiddle.net/jWNkh/22/ I want the draggable to revert back if its not in the drag1 div.

jquery:

    $("#drag").draggable({
             revert:'invalid',
             cursor:'move',
             appendTo: 'body',
             containment    : 'document',

             helper     : 'clone'
        });
        $("#drop").droppable({         
            accept:'#drag',
            drop:  dropFunction,                              

            });

How can i limit the area ? any help.

Thanks.

Upvotes: 0

Views: 1961

Answers (2)

Loyalar
Loyalar

Reputation: 2163

You can set the accept property on the droppable options, aswell as the tolerance property (read more on the tolerance property here). The tolerance property defines if the element has to just be 50% inside of the droppable div, or if it has to be completely inside. If you want it to only accept it if it's completely inside, you set the tolerance to fit.

It is shown in this fiddle (an updated version of yours)

$('#drop').droppable({ accept: "#drag", tolerance: "fit"});

Upvotes: 1

fanfan1609
fanfan1609

Reputation: 179

If you want just drag into drop1, just set droppable in drop1 div

$('#drop1').droppable({

});

Upvotes: 0

Related Questions