Question

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

在下面的示例中，如果您拖动＆＃39;项目3（已禁用）＆＃39;，则父容器将成为拖动目标。它应该仍然是可拖动的，但只能在内部项目之外。

<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

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

＆＃13;

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

＆＃13;

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; }

＆＃13;

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

＆＃13;

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

1 个答案: