JQuery UI Draggable how to get drag start position

Question

I can drag my drag and drop items and drop them onto my droppables and get the drag position from ui.absolutePosition in the drop event. I need to know from what position the drag started. I tried to get ui.position in the drag start event, but this value is null. I also tried ui.position on a drag event, but it is undefined.

Any ideas?

Answer 1

You can use ui.draggable from the drop.droppable function to get what you need.

ui.draggable.offset()

perhaps.

If you want the exact position of the mouse when you start dragging, you can use event.clientX and event.clientY in the .draggable () trigger function

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

Answer 2

-

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

, ... ,

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