CODEWITHSUNDEEP
jquerydrag-and-droplimitrestriction
Mike
Mike

Reputation: 799

Stop div from being dragged above top 300px

Stop div from being dragged obove 300px top without useing contain.

so far i made it flicker and get back.. or just get back to 300px after drop

how can i limit it in a proper way? i need it to DO NOT Drag beyond 300px top while drag, and not like "contain" i got only top limit... the rest is limitless. please help.

Fiddle demo

$(function() {
    $( "#draggable" ).draggable({
                 drag: function () {
                     if($(this).offset().top<300)
                          $(this).css("top", 300);
                 },
                 stop: function () {
                     if($(this).offset().top<300)
                          $(this).css("top", 300);
                 },
     });
});

Upvotes: 0

Views: 160

Answers (1)

Mircea Sandu
Mircea Sandu

Reputation: 926

you should use containment with array of coordinates, something like

    $( "#draggable" ).draggable({
  containment: [ 0, 300, 10000, 10000 ]
    });

o it's 0 on the left, starting from 300 pixels on top, 10000 pixels ( or whatever you want, something like 9999999 works also ) in the right and the same for bottom.

hope it helps!

forgot to add the fiddle link http://jsfiddle.net/3ARx9/9/

Upvotes: 1

Related Questions