jQuery draggable ui disable children elements

Question

I am trying to get the children elements of a div to not be draggable. And so far I have to manually enter every disabled:true events which is being a pain. Any way to select all elemtents to not be draggable only the main element I selected?

$(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'});
});

that is what I have had so far, the html is something like

<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

I think you can prevent child elements from being draggable using draggable's cancel property, which uses jQuery selector syntax. To prevent all child elements from being draggable you could use:

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

Answer 2

try the children() method, editing your code example, something like:

$(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'});
});

more info http://api.jquery.com/children/

Not knowing your desired UX, you may also consider using a handle on only the element(s) that you want draggable: http://jqueryui.com/draggable/#handle