CODEWITHSUNDEEP
javascriptjqueryhtml
supersize
supersize

Reputation: 14773

get live position of draggable element

I would like to know if anyone of you has a clue how to solve following problem:

I have a lots of divs

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

and they all are draggable with jquery ui

var $divs = $('#one, #two, #three')
$divs.draggable({   
     start: dragStart, cursor: 'move', stop: dragEnd        
      });

what I want to is that I get the current position of the dragged element in realtime so that if an event is triggered if the dragged div is for example:

if($('#two').position().left <= 500) { /*baadaboom*/ }

I drag the div at a point where

left is 1000px

and immediately if its

smaller than 500px

it should fire!

Upvotes: 4

Views: 2823

Answers (2)

Spokey
Spokey

Reputation: 10994

You can try the following

var $divs = $('#one, #two, #three')
$divs.draggable({
    start: dragStart, cursor: 'move', stop: dragEnd,
    drag: function () {
        var t = $(this), l = $(this).offset().left;
        t.text(l);

        if(l < 500){
           t.text('Badaboom');
        }
    }
});

Fiddle

Upvotes: 5

Manish Jangir
Manish Jangir

Reputation: 505

Take a global variable var position and set it when the div is clicked to drag. Then you can use this variable to comparision.

Upvotes: -1

Related Questions