在子元素中禁用jQuery可拖動

Question

我正在使用jQuery 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>