子要素でドラッグ可能なjQueryを無効にする

Question

私はjQuery draggableを使用しています。私はメインのdivにdraggable関数を追加しました。今ではすべての子要素でドラッグ可能です。親がドラッグ可能な場合、子div内でドラッグを無効にするにはどうすればよいですか？

$(function() { 
 
    $("#draggable").draggable(); 
 
});

#draggable { 
 
    width: 150px; 
 
    height: 150px; 
 
    padding: 0.5em; 
 
    border: black solid 2px; 
 
} 
 

 
.noDrag { 
 
    width: 100px; 
 
    height: 50px; 
 
    border: blue solid 2px; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div id="draggable" class="ui-widget-content"> 
 
    <p>Drag me around</p> 
 
    <div class='noDrag'>No Drag</div> 
 
</div>

Answer 1

この使用にcancel propertyを修正し、それをあなたが上のドラッグ動作を無効にする要素を一致させるセレクタを提供し、このようにするには、次の

$(function() { 
 
    $("#draggable").draggable({ 
 
    cancel: '.noDrag' 
 
    }); 
 
});

#draggable { 
 
    width: 150px; 
 
    height: 150px; 
 
    padding: 0.5em; 
 
    border: black solid 2px; 
 
} 
 

 
.noDrag { 
 
    width: 100px; 
 
    height: 50px; 
 
    border: blue solid 2px; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div id="draggable" class="ui-widget-content"> 
 
    <p>Drag me around</p> 
 
    <div class="noDrag">No Drag</div> 
 
</div>