将 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();

Answer 2

对于不想拖拽的父元素，可以在子元素上做一些单独的选择器，防止拖拽父元素：

$('*').draggable();

$('#some-child').draggable({cancel: '#some-parent'});

但是，这将在某些选择器上多次初始化 draggable。

你应该这样做：

$('*').not('#specific-child').not('#other-specific-child').draggable();

$('#some-child').draggable({cancel: '#some-parent'});

或者你可以创建一个你不想要的孩子数组，然后循环。

请参阅jQuery UI docs for draggable cancel。