Question

我试图让div的子元素不可拖动。到目前为止，我必须手动输入每个残疾人：真正的事件，这是一个痛苦。有没有选择所有elemtents只能选择我选择的主要元素的方法？

$(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>

Answer 1

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

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

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，您也可以考虑仅使用您想要拖动的元素的句柄：http://jqueryui.com/draggable/#handle

jQuery draggable ui禁用子元素

2 个答案: