禁用子元素中的jQuery draggable

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属性,并为其提供一个选择器以匹配要禁用拖动行为的元素,如下所示:

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