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

Posted 2023-02-22

【中文标题】禁用 jQueryUI 中嵌套可排序项的拖动冒泡

【英文标题】：Disable drag bubbling for nested sortable items in jQueryUI

【发布时间】：2017-01-23 19:05:54

【问题描述】：

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

在下面的示例中，如果您在“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/

【参考方案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>

【讨论】：

这有轻微推动元素位置的副作用，因为拖动会在停止前瞬间发生。

它还对 DOM 定位做了一些奇怪的事情，可能是由于内部一些未清理的状态。

通过此更新，在行为上与原始代码没有任何变化。禁用相关元素，无论是以编程方式还是静态方式，似乎都没有效果。父级仍然通过禁用元素接收拖动事件。

更新后的 sn-p 只需稍作修改即可完成工作。非常感谢您的努力！