jQuery可拖动ui禁用子元素

Question

我想让一个div的子元素不能被拖动。目前，我必须手动输入每个disabled:true事件，这很麻烦。有没有办法仅选择所有元素不可拖动，只选中我选择的主要元素？

$(function() {
    $( "#profile-advanced-right div" ).draggable();
$( "#profile-advanced-left div" ).draggable();
$( ".main-head" ).draggable({disabled:true});
$( ".main-content" ).draggable({disabled:true});
$( ".h3" ).draggable({disabled:true});
$( ".subtitle" ).draggable({disabled:true});
$('.ui-state-disabled').css({'opacity':'1'});
});

这是目前我的进展情况，HTML 代码如下：

<div id="profile-advanced-right">
  <div class="module main">
    <div class="main-head">
  <span class="h3">Title</span>
 </div>
 <div class="main-content">
   <div>
   yadda
 </div>
</div>
</div>

- EasyBB

Answer 1

我认为您可以使用draggable的cancel属性来防止子元素被拖动，该属性使用jQuery选择器语法。要防止所有子元素被拖动，您可以使用以下代码：

$('#profile-advanced-right').draggable({ cancel: '#profile-advanced-right' > * });

- Chris Smith

Answer 2

尝试使用children()方法，编辑您的代码示例，类似于：

$(function() {
    $("#profile-advanced-right div").draggable();
    $("#profile-advanced-left div").draggable();
    $("#profile-advanced-right div").children().draggable({disabled:true});
    $("#profile-advanced-left div").children().draggable({disabled:true});
    $('.ui-state-disabled').css({'opacity':'1'});
});

更多信息 http://api.jquery.com/children/

如果您不知道所需的 UX，您还可以考虑仅在您想要可拖动的元素上使用 handle：http://jqueryui.com/draggable/#handle

- Jim Frenette

---

工作得更好，是的，但有些元素没有被禁用。你觉得可能是兄弟元素吗？虽然这会导致一些div无法工作。 - EasyBB

我已经成功地将所有东西按照需要的方式工作了。我不得不手动禁用一些内容，但没关系。谢谢Jim Frenette！ - EasyBB