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

Posted

技术标签:

【中文标题】jquery-ui-sortable,当列表被隐藏时如何防止取消?【英文标题】:jquery-ui-sortable, how to prevent cancel when list gets hidden? 【发布时间】:2020-03-25 02:40:18 【问题描述】:

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

现在我想实现以下目标:

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

目前,一旦源列表被隐藏,拖动就会被取消。我可以防止这种情况发生吗?

【问题讨论】:

【参考方案1】:

我认为这就是您要寻找的。如果您通过将 css 属性 display 设置为 none 来隐藏列表,您将无法检测到可排序事件,因为该列表未呈现。

尝试改用opacity

使用opacity 创建一个“隐藏”列表的类。我将我的班级命名为fake-hidden。将该类附加到您希望在进入站点时隐藏的可排序列表。使用可排序选项helper: 'clone'appendTo: 'body' 创建当前拖动项目的克隆,这将允许我们在其父项在技术上“隐藏”时看到该项目。在可排序的start 上,我们将向当前拖动的项目添加一些数据,将og-parent 设置为项目的第一个父项。在可排序的over 上,我们将检查新父级是否不等于 og-父级(因为鼠标移动时过火)。如果这是真的,我们将使用 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>

【讨论】:

以上是关于jquery-ui-sortable,当列表被隐藏时如何防止取消?的主要内容,如果未能解决你的问题,请参考以下文章

当我们使用 JavaScript 隐藏/显示时清除下拉列表和/或文本框内容当它们被交替选择时

JQuery-UI-sortable基础使用和详参

获取隐藏下拉列表禁用选定选项的值

如何使用 wpf 代码隐藏在列表框中隐藏单个列表框项?

滚动 uitableview 时 UIProgressView 被隐藏

Admob 横幅隐藏列表视图片段的最后一项