jquery ui droppable but not some child elements

Question

I want to drag and drop but exclude some child elements from the drop zone with jQueryUI Droppable like:

<div id="dropZone">
  <div></div>
  <div></div>
  <div>exclude this container</div>
</div>

Answer 1

You can use cancel option to prevent dragging some elements like below:

HTML

<div id="dropZone">
  <div class="child">child1</div>
  <div class="child">child2</div>
  <div class="child disable">exclude this container</div>
</div>

JS

$( "#dropZone .child").draggable({
  cancel: ".disable"
});

Online Demo (jsFiddle)