41

How do I get the coordinate position after using jQuery drag and drop? I want to save the coordinate to a database, so that next time I visit, the item will be in that position. For example, x: 520px, y: 300px?

EDIT:

I am PHP and mysql programmer :)

Is there any tutorial out there?

9 Answers9

39

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="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>
Cudos
  • 5,733
  • 11
  • 50
  • 77
  • Just used this to help enhance by droppable application, many thanks! – Pez Cuckow Jun 04 '10 at 12:47
  • Does this really work for anybody?? I had no luck with this. See [my answer](http://stackoverflow.com/a/20672939/165673) for solution that works. – Yarin Dec 19 '13 at 03:29
18

Had the same problem. My solution is next:

$("#element").droppable({
    drop: function( event, ui ) {

        // position of the draggable minus position of the droppable
        // relative to the document
        var $newPosX = ui.offset.left - $(this).offset().left;
        var $newPosY = ui.offset.top - $(this).offset().top;

    }
});
Arsen K.
  • 5,494
  • 7
  • 38
  • 51
  • I am having trouble understanding this. Can you please explain what is "ui" and what is "this" ? attn : this solution worked for me. – jumpa Jun 18 '12 at 18:13
  • 5
    From jQuery UI documentation: "All callbacks receive two arguments: The original browser event and a prepared ui object: 1) ui.draggable - current draggable element, a jQuery object; 2) ui.helper - current draggable helper, a jQuery object; 3) ui.position - current position of the draggable helper { top: , left: } ; 4) ui.offset - current absolute position of the draggable helper { top: , left: } . – Arsen K. Jul 01 '12 at 10:46
  • Thanks man, I was having hard time struggling until I found your solution. This really helps me. – przbadu Sep 20 '14 at 11:08
  • This was the ideal solution I was looking for. Simple and straightforward. – S.Dan Oct 25 '16 at 06:21
9

None of the above worked for me.

Here's my solution- works great:

$dropTarget.droppable({
    drop: function( event, ui ) {

    // Get mouse position relative to drop target: 
    var dropPositionX = event.pageX - $(this).offset().left;
    var dropPositionY = event.pageY - $(this).offset().top;
    // Get mouse offset relative to dragged item:
    var dragItemOffsetX = event.offsetX;
    var dragItemOffsetY = event.offsetY;
    // Get position of dragged item relative to drop target:
    var dragItemPositionX = dropPositionX-dragItemOffsetX;
    var dragItemPositionY = dropPositionY-dragItemOffsetY;

    alert('DROPPED IT AT ' + dragItemPositionX + ', ' + dragItemPositionY);

(Based partly off solution given here: https://stackoverflow.com/a/10429969/165673)

Community
  • 1
  • 1
Yarin
  • 173,523
  • 149
  • 402
  • 512
8

This worked for me:

$("#element1").droppable(
{
    drop: function(event, ui)
    {
        var currentPos = ui.helper.position();
            alert("left="+parseInt(currentPos.left)+" top="+parseInt(currentPos.top));
    }
});
ArunValaven
  • 1,753
  • 2
  • 25
  • 44
Sampath
  • 81
  • 1
  • 1
2

$(function() 
  {
    $( "#element" ).draggable({ snap: ".ui-widget-header",grid: [ 1, 1 ]});
  });
    $(document).ready(function() {
        $("#element").draggable({ 
                containment: '#snaptarget', 
                scroll: false
         }).mousemove(function(){
                var coord = $(this).position();
                var width = $(this).width();
               var height = $(this).height();
                $("p.position").text( "(" + coord.left + "," + coord.top + ")" );
                $("p.size").text( "(" + width + "," + height + ")" );
         }).mouseup(function(){
                var coord = $(this).position();
                var width = $(this).width();
                var height = $(this).height();
                $.post('/test/layout_view.php', {x: coord.left, y: coord.top, w: width, h: height});
               
                });
        });
#element {background:#666;border:1px #000 solid;cursor:move;height:110px;width:110px;padding:10px 10px 10px 10px;}
#snaptarget { height:610px; width:1000px;}
.draggable { width: 90px; height: 80px; float: left; margin: 0 0 0 0; font-size: .9em; }
.wrapper
{ 
background-image:linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
height:100%;
background-size:45px 45px;
border: 1px solid black;
background-color: #434343;
margin: 20px 0px 0px 20px;
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Layout</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="../themes/default/css/test4.css" type="text/css" charset="utf-8"/>
    <script src="../themes/default/js/layout.js"></script>
  </head>
<body>
    <div id="snaptarget" class="wrapper">
        <div id="element" class="draggable ui-widget-content">
          <p class="position"></p>
          <p class="size"></p>
        </div>
    </div> 
    <div></div>
</body>
</html>
Syahir Halim
  • 33
  • 7
2

If you are listening to the dragstop or other events, the original position should be a ui parameter:

dragstop: function(event, ui) {
    var originalPosition = ui.originalPosition;
}

Otherwise, I believe the only way to get it is:

draggable.data("draggable").originalPosition

Where draggable is the object you are dragging. The second version is not guaranteed to work in future versions of jQuery.

soso
  • 181
  • 1
  • 8
2

I would start with something like this. Then update that to use the position plugin and that should get you where you want to be.

Awais Qarni
  • 17,492
  • 24
  • 75
  • 137
TeckniX
  • 673
  • 1
  • 7
  • 14
1

I was need to save the start position and the end position. this work to me:

    $('.object').draggable({
        stop: function(ev, ui){
            var position = ui.position;
            var originalPosition = ui.originalPosition;
        }
    });
Diego Mariano
  • 191
  • 2
  • 6
1

Cudos accepted answer is great. However, the Draggable module also has a "drag" event that tells you the position while your dragging. So, in addition to the 'start' and 'stop' you could add the following event within your Draggable object:

    // Drag current position of dragged image.
    drag: function(event, ui) {

        // Show the current dragged position of image
        var currentPos = $(this).position();
        $("div#xpos").text("CURRENT: \nLeft: " + currentPos.left + "\nTop: " + currentPos.top);

    }
moluv00
  • 374
  • 2
  • 7