javascript - 在子元素中禁用 jQuery 可拖动

Question

我正在使用jQuery draggable 。我在主 div 中添加了可拖动功能。现在，在所有子元素中它也是可拖动的。如果父级可拖动，如何禁用子级 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>