jQuery可拖动 - 如何访问坐标答案

【问题标题】：jQuery draggable - how to access the coordinatesjQuery可拖动 - 如何访问坐标
【发布时间】：2012-06-16 07:46:48
【问题描述】：

如何访问可拖动对象的动态变化坐标？我不仅想要stop 的坐标，还想要一个恒定的位置信息流。

换句话说，如果我拖动object A，我应该能够通过（1）观察object A的变化，然后（2）将它们应用到位置，让object B平行移动object B.

在这段代码中，我希望红色块 (obj2) 与蓝色块 (obj1) 一起移动。

<html>
<head>
<style>
#obj1 {
   position:fixed;
   top:50px;
   left:50px;
   width: 40px;
   height: 40px;
   background-color: blue;
}
#obj2 {
   position:fixed;
   top:150px;
   left:150px;
   width: 40px;
   height: 40px;
   background-color: red;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        $('#obj1').draggable();
    })
</script>
</head>

<body>
    <div id="obj1"></div>
    <div id="obj2"></div>
</body>
</html>

【问题讨论】：

标签： jquery coordinates draggable

【解决方案1】：

您可以使用drag可拖动事件：

$("#obj1").draggable({
    drag: function(event, ui) {
        var pos = ui.position;
        $("#obj2").css({
            left: pos.left + 100,
            top: pos.top + 100
        });
    }
});

演示： http://jsfiddle.net/kPEfL/

【讨论】：

【解决方案2】：

可拖动插件有 3 个事件：开始、拖动和停止（所有这些都提供坐标）。您可以绑定到拖动事件并在您的回调中获取您需要的信息。

Here你可以找到一个例子和演示。

【讨论】：

【解决方案3】：

offsetY 和 offsetY 事件属性适用于此目的，您可以附加 drag 处理程序来获取它们：

$('#obj1').bind('drag', function(event) {
    console.log(event.offsetY); // dymamic y position
    console.log(event.offsetX); // dymamic x position
});

参考：

the Draggable demos page

【讨论】：