jquery-ui-sortable，当列表被隐藏时如何防止取消？

Question

我的页面中有几个可排序的列表，在它们之间对项目进行排序很好。

现在，我想实现以下几点：

我想从隐藏列表中的所有列表开始。用户从可见列表中拖动一项，将其移动到页面中onMouseOver事件隐藏可见列表的热点上，并显示用户悬停的热点，以便用户可以继续将该项拖动到该列表中。

此时，一旦隐藏了源列表，拖动操作就会取消。我能防止这种情况发生吗？

Answer 1

我想这就是你要找的。如果通过将css属性display设置为none来隐藏列表，则将无法检测到可排序事件，因为该列表不会呈现。

请尝试使用opacity。

创建一个使用opacity“隐藏”列表的类。我将我的类命名为fake-hidden。将该类附加到您希望在进入站点时隐藏的可排序列表。使用可排序选项helper: 'clone'和appendTo: 'body'，以便创建当前拖动项的克隆，这将允许我们在父项在技术上处于“隐藏”状态时看到该项。在可排序的start中，我们将向当前拖动的项添加一些数据，将og-parent设置为该项的第一个父项。在可排序的over上，我们将检查新的父级是否不等于og-parent (因为在mousemove上触发)。如果这是真的，我们将使用fake-hidden类隐藏og-parent，并从悬停列表中删除该类。然后，我们将为这个新的可排序列表设置og-parent。

这是一个fiddle。

下面是一个内联示例：

​

$('.sortable-list').sortable({
  connectWith: '.sortable-list',
  items: '.item',
  helper: 'clone',
  appendTo: 'body',
  start: function(event, ui) {
    ui.item.data('og-parent', $(this));
  },
  over: function(event, ui) {
    if (!ui.item.data('og-parent').is($(this))) {
      ui.item.data('og-parent').addClass('fake-hidden');
      $(this).removeClass('fake-hidden');
    }
    ui.item.data('og-parent', $(this));
  }
});

.sortable-list {
  padding: 10px;
  width: 200px;
  margin: 0 auto;
}

.fake-hidden {
  opacity: 0;
}

.item {
  list-style-type: none;
  text-align: center;
  padding: 5px 10px;
  margin: 4px 0;
  background: #AF1843;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="row">
  <div class="col-sm-6">
    <ul class="sortable-list list-1">
      <li class="item">list 1.1</li>
      <li class="item">list 1.2</li>
      <li class="item">list 1.3</li>
      <li class="item">list 1.4</li>
    </ul>
  </div>
  <div class="col-sm-6">
    <ul class="sortable-list list-2 fake-hidden">
      <li class="item">list 2.1</li>
      <li class="item">list 2.2</li>
      <li class="item">list 2.3</li>
      <li class="item">list 2.4</li>
    </ul>
  </div>
</div>
<div class="row">
  <div class="col-sm-6">
    <ul class="sortable-list list-3 fake-hidden">
      <li class="item">list 3.1</li>
      <li class="item">list 3.2</li>
      <li class="item">list 3.3</li>
      <li class="item">list 3.4</li>
    </ul>
  </div>
  <div class="col-sm-6">
    <ul class="sortable-list list-4 fake-hidden">
      <li class="item">list 4.1</li>
      <li class="item">list 4.2</li>
      <li class="item">list 4.3</li>
      <li class="item">list 4.4</li>
    </ul>
  </div>
</div>

​