How do I get the coordinate position after using jQuery drag and drop?

by

I just made something like that (If I understand you correctly).

I use he function position() include in jQuery 1.3.2.

Just did a copy paste and a quick tweak… But should give you the idea.

// Make images draggable.
$(".item").draggable({

    // Find original position of dragged image.
    start: function(event, ui) {

        // Show start dragged position of image.
        var Startpos = $(this).position();
        $("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
    },

    // Find position where image is dropped.
    stop: function(event, ui) {

        // Show dropped position.
        var Stoppos = $(this).position();
        $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
    }
});

<div id="container">
    <img id="productid_1" src="https://stackoverflow.com/questions/849030/images/pic1.jpg" class="item" alt="" title="" />
    <img id="productid_2" src="images/pic2.jpg" class="item" alt="" title="" />
    <img id="productid_3" src="images/pic3.jpg" class="item" alt="" title="" />
</div>

<div id="start">Waiting for dragging the image get started...</div>
<div id="stop">Waiting image getting dropped...</div>

More Related Contents:

  1. How to get the position of a draggable object
  2. Slide right to left?
  3. jQuery Drag And Drop Using Live Events
  4. How to get mouse position in jQuery without mouse-events?
  5. ‘dragleave’ of parent element fires when dragging over children elements
  6. jQuery drag and drop simulation does not work for the last draggable
  7. Is there a good jQuery Drag-and-drop file upload plugin? [closed]
  8. When I make a draggable clone and drop it in a droppable I cannot drag it again
  9. How do I duplicate item when using jquery sortable?
  10. Getting the position of the element in a list when it’s drag/dropped (ui.sortable)
  11. Draggable revert if outside this div and inside of other draggables (using both invalid and valid revert options)
  12. Determine mouse position outside of events (using jQuery)?
  13. Html5 drag and drop on svg element
  14. Drag-Drop elements between parent frame and child iframe
  15. jQuery UI dialog box not positioned center screen
  16. Prevent Default on Form Submit jQuery
  17. Use jQuery to change an HTML tag?
  18. How can I animate multiple elements sequentially using jQuery?
  19. jquery – Click event not working for dynamically created button [duplicate]
  20. wait for a jquery ajax callback from calling function
  21. Order of execution of jquery document ready
  22. Disable specific days of the week on jQuery UI datepicker [duplicate]
  23. Unobtrusive Ajax stopped working after update jQuery to 1.9.0
  24. jQuery $.animate() multiple elements but only fire callback once
  25. Selecting text on focus using jQuery not working in Safari and Chrome
  26. JqGrid Filter Rules – Can we filter based on an Array?
  27. How do you fadeIn and animate at the same time?
  28. Initialising select2 created dynamically
  29. Re-attaching jQuery detach();
  30. Custom CSS to allow chrome textarea resize smaller than initial state?

Leave a Comment