3

我试图让 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>
4

2 回答 2

4

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

$('#profile-advanced-right').draggable({ cancel: '#profile-advanced-right' > * });
于 2014-10-20T11:22:26.353 回答
1

尝试 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

于 2012-11-30T01:39:13.317 回答