javascript - 将 UI 元素与 DOM 解耦以独立拖动它们

Question

我已经使用 jquery UI 使网页上的所有元素都可以拖动。

<div style="width:150px;height:120px;border:1px solid red;background-color:#F0F0F0">
    <span style="background-color:yellow">Drag me</span>
    <span style="background-color:red">Drag me</span>
</div>
<script>
$('*').draggable();
</script>

http://jsfiddle.net/m723rf2t/

我可以将两个跨度移到它们的边界框之外。但是，当我拖动边界框时，两个 span 元素也会移动(因为它们是被拖动的 DOM 元素的子元素)。

有没有一种方法可以“解耦”所有 DOM 元素，这样我就可以独立拖动它们，而父元素对子元素没有任何影响(继承的样式除外)？

重组网站不是一种选择。

Answer 1

好吧，边界框不应该是被拖动对象的父对象，而是兄弟对象。边界框应该包含子元素吗？还是应该“绘制”被拖动元素的轮廓？

在您的示例中单独拖动元素的一种方法如下(但它很可能实际上不适合您的实际站点)

Demo fiddle

和代码

<div style="width:150px;height:120px;border:1px solid red;background-color:#F0F0F0;position: fixed;">
    <span style="left: 14px; top: 14px;background-color:yellow;position: fixed;">Drag me</span>
    <span style="left: 14px; top: 14px;background-color:red;position: fixed;margin-left: 80px">Drag me</span>
</div>

$('*').draggable();