在子元素中禁用jQuery可拖动 [英] Disable jQuery draggable in child element

问题描述

我正在使用 jQuery可拖动.我已经将可拖动功能添加到主div中.现在，在所有子元素中，它也是可拖动的.如果父级是可拖动的，如何禁用子div中的拖动?

I am using jQuery draggable. I have added draggable function to main div. Now in all the child elements it's also draggable. How can I disable dragging inside child div if parent is draggable?

$(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>

推荐答案

要解决此问题，请使用 cancel属性，并为它提供一个选择器，以匹配要禁用其拖动行为的元素，如下所示:

To fix this use the cancel property, and provide it a selector to match the element you want to disable the drag behaviour on, like this:

$(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>

这篇关于在子元素中禁用jQuery可拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！