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元素的子元素）。

有没有办法去除＆＃34;去耦＆＃34;所有DOM元素，以便我可以独立拖动它们，而父级不会对子级有任何影响（除了继承的样式）？

重组网站不是一种选择。

Answer 1

好吧，边界框不应该是拖动对象的父级，而是兄弟。边界框是否应该包含孩子？或者是否应该＆＃34;绘制＆＃34;拖动元素的轮廓？

在您的示例中单独拖动项目的一种方法是在下面（但它很可能实际上并不适合您的实际网站）

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。

从DOM中分离UI元素以单独拖动它们

2 个答案: