在使用jQuery拖放后，我如何获取坐标位置？

Question

使用jQuery拖放后，如何获取坐标位置？我想将该坐标保存到数据库中，以便下次访问时，该项将位于该位置。例如：x: 520px，y: 300px?

编辑:

我是PHP和mysql程序员 :)

是否有任何教程？

- michael

Answer 1

如果我理解正确，我刚刚做了类似于这样的东西。

我使用jQuery 1.3.2中包含的position()函数。

我只是复制粘贴并快速调整了一下...但应该能给你一个想法。

// 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

---

刚刚使用这个工具来帮助增强我的可拖放应用程序，非常感谢！ - Pez Cuckow

这真的对任何人都有效吗？？我用这个没有成功。请查看我的答案，以获取可行的解决方案。 - Yarin

Answer 2

我遇到了同样的问题。我的解决方案如下：

$("#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.

---

我有点难以理解这个。你能否请解释一下什么是“ui”和什么是“this”？注意：这个解决方案对我有效。 - jumpa

从jQuery UI文档中： "所有回调函数都会接收到两个参数：原始的浏览器事件和准备好的ui对象：1）ui.draggable - 当前可拖动的元素，一个jQuery对象；2）ui.helper - 当前可拖动的helper，一个jQuery对象；3）ui.position - 可拖动的helper的当前位置{ top: , left: }；4）ui.offset - 可拖动的helper的当前绝对位置{ top: , left: }。" - Arsen K.

谢谢，伙计。在找到你的解决方案之前，我一直很苦恼。这真的帮了我很多。 - przbadu

这是我一直在寻找的理想解决方案。简单明了。 - S.Dan

Answer 3

以上方法都对我没用。

这是我的解决方案-非常好用：

$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);

（部分基于此处给出的解决方案：https://dev59.com/w3A75IYBdhLWcg3wi5sr#10429969）

（该段文字为注释，无需翻译）

- Yarin

---

运行得很好。谢谢。 - SaiKiran Mandhala

请问，我们需要使用哪个单位？ - Suhail Kakar

Answer 4

这对我起作用：

这对我有用：

$("#element1").droppable(
{
    drop: function(event, ui)
    {
        var currentPos = ui.helper.position();
            alert("left="+parseInt(currentPos.left)+" top="+parseInt(currentPos.top));
    }
});

- Sampath

Answer 5

如果您正在监听dragstop或其他事件，则原始位置应为UI参数：

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

否则，我相信获得它的唯一方法是：

draggable.data("draggable").originalPosition

拖动的对象为draggable。第二个版本不能保证在未来的jQuery版本中能够正常工作。

- soso

Answer 6

$(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

---

这很棒，它是以像素为单位的吗？ - almost a beginner

Answer 7

我会从类似这个开始。 然后更新它，使用位置插件， 这样就可以达到你想要的效果了。

- TeckniX

Answer 8

Cudos所接受的答案很棒。然而，Draggable模块还有一个“drag”事件，可以在拖动时告诉您位置。因此，在“start”和“stop”之外，您可以在Draggable对象中添加以下事件：

    // 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

Answer 9

我需要保存起始位置和结束位置。 这对我来说很重要：

    $('.object').draggable({
        stop: function(ev, ui){
            var position = ui.position;
            var originalPosition = ui.originalPosition;
        }
    });

- Diego Mariano