禁用 jQueryUI 中嵌套可排序项的拖动冒泡

Question

给定一组可排序/可拖动的容器，每个容器都包含可拖动/可排序的列表项，如何在不让拖动事件冒泡到父容器的情况下使列表项可选地不可排序？

在下面的示例中，如果您在“Item 3 (Disabled)”上拖动，则父容器将成为拖动目标。它应该仍然是可拖动的，但只能在内部项目之外。

<script>
  $(function () {
    $('.sortable').sortable({
      items: '.draggable'
    });
    $('.sortable').disableSelection();
  });
</script>

<ul class="sortable outer">
  <li class="outer-item draggable">
    <ul class="sortable">
      <li class="inner-item draggable"></span>Item 1</li>
      <li class="inner-item draggable"></span>Item 2</li>
      <li class="inner-item"></span>Item 3 (Disabled)</li>
    </ul>
  </li>
  <li class="outer-item draggable">
    <ul class="sortable">
      <li class="inner-item draggable"></span>Item 4</li>
      <li class="inner-item draggable"></span>Item 5</li>
      <li class="inner-item draggable"></span>Item 6</li>
    </ul>
  </li>
</ul>

https://codepen.io/jneander/full/NRNZqL/

Answer 1

为了停止不可排序元素的拖动事件，您可以禁用未包含的项目：

$(function () {
  $('.sortable').sortable({
    items: '.draggable'
  });
  $('li:not(".draggable")').on('mousedown', function(e) {
    e.stopPropagation();
  });
});

body {
  font-family: Helvetica, sans-serif;
  color: #222;
}

.sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.outer {
  padding: 1em;
  width: 200px;
}

.outer-item {
  background: #f9f3f3;
  border: 1px solid #e1c5c5;
  padding: 1em;
}

.outer-item:not(:last-child) {
  margin-bottom: 1em;
}

.inner-item {
  background: #f6f6f6;
  border: 1px solid #c5c5c5;
  padding: 0.5em;
}

.inner-item:not(:last-child) {
  margin-bottom: 0.5em;
}
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<ul class="sortable outer">
    <li class="outer-item draggable">
        <ul class="sortable">
            <li class="inner-item draggable"></span>Item 1</li>
            <li class="inner-item draggable"></span>Item 2</li>
            <li class="inner-item"></span>Item 3 (Disabled)</li>
        </ul>
    </li>
    <li class="outer-item draggable">
        <ul class="sortable">
            <li class="inner-item draggable"></span>Item 4</li>
            <li class="inner-item draggable"></span>Item 5</li>
            <li class="inner-item draggable"></span>Item 6</li>
        </ul>
    </li>
</ul>