CODEWITHSUNDEEP
jquery
WJS
WJS

Reputation: 31

JQuery UI Draggable how to get drag start position

I can drag my draggable items and drop them on my droppables and get the drop position from ui.absolutePosition on the drop event. I need to know what position the drag started from. I have tried getting ui.position on the drag start event but this is null. I've also tried ui.position on the drag event but this is undefined.

Any ideas?

Upvotes: 3

Views: 9521

Answers (2)

domi27
domi27

Reputation: 6923

A possible better way might be to save element's start position in data

jQuery("selector").draggable({
    start: function(event, ui) {
        // Log start dragged position to element data
        jQuery(this).data('startPosition', jQuery(this).position());
    }
});

So you can use it later or also in other functions ..... e.g.

stop: function(event, ui){
     Startpos = jQuery(this).data("startPosition");
     alert("DragStart : Left("
          + parseInt(Startpos.left) 
          + ")Top(" + parseInt(Startpos.top) +")"
     );
}

Upvotes: 3

Marc
Marc

Reputation: 9354

You should be able to use the ui.draggable from the .droppable's drop function to get what you're after.

ui.draggable.offset()

perhaps.

If you want the exact mouse position on start of drag, you can use the event.clientX and event.clientY on the .draggable() start function

$('selector').draggable({ ...options...
      start: function(event, ui) {
                   alert("You clicked x:" + event.clientX + " y:" + event.clientY);
             }
});

Upvotes: 3

Related Questions