可拖动的 jquery UI 是否可以“感知位置”其他元素？答案

【问题标题】：Can jquery UI draggable be "position-aware" of other elements?可拖动的 jquery UI 是否可以“感知位置”其他元素？
【发布时间】：2010-08-20 22:44:44
【问题描述】：

我正在实施 jquery UI draggable 并有 2 个您在链接页面上看到的这些可拖动项。它们当然是可拖动的，所以我可以根据需要移动它们。

不过，我如何让它们相互了解，以便在被拖动时尝试使它们对齐或显示对齐标记，它们与另一个可拖动对象到达相同的 x 或 y？

【问题讨论】：

标签： jquery jquery-ui open-source draggable

【解决方案1】：

听起来是个有趣的问题。

我想我会设置一个共同的参考点，并通过使用该点进行三角测量来测量它们之间的距离。

例如。您可以使用页面的左上角作为参考点... 让 elementa 和 elementb 成为您要比较的 div。函数获取距离（）{ var aPos = $("#elementa").offset(); var bPos = $("#elementb").offset();

// distance of a to b:
//y = (y2-y1)
//x = (x2-x1)
var xa = aPos.left;
var xb = bPos.left;

var ya = aPos.top;
var yb = bPos.top;

//vector from point a to b:
x = xa-xb;
y = ya-yb;

// length of the vector (distance from div a to b)
return Math.sqrt(x*x + y*y);

}

如果您想在拖动过程中获得位置，您可以使用包装器： http://jsbin.com/etako/edit

或记录如下位置： $(this).data('draggable').offset.click.top -= x

【讨论】：

我喜欢您将 X 和 Y 偏移量组合成一个指标的方式。下次我遇到一些基于位置的检查时，我一定会尝试这个。

【解决方案2】：

好问题。

首先，您需要在每个可拖动对象上生成以下数据的列表：

X 位置
Y 位置
高度
宽度

将对象定义为可拖动时，您可以将回调绑定到“拖动”事件。如果可拖动对象移动 1 个像素，则触发此事件。这意味着此回调将被大量调用，因此将计算保持在最低限度是关键。

当回调被调用时，你会得到 ui 和 event 对象。 ui 对象将包含拖动对象上有价值的 X 和 Y 定位数据。

借助 Draggee 和其他可拖动对象的尺寸和位置，您可以轻松计算与其兄弟对象的接近程度并采取相应措施。有了可用数据，您应该能够实现 akellehe 的数学。

在我忘记之前，您必须重新计算可拖动停止事件的位置列表。

编辑：查看draggable 上的以下链接，它包含有关可拖动事件、方法和值的文档。

【讨论】：