我的页面上有几个可排序的列表,可以在它们之间对项目进行排序很好。
现在我想实现以下目标:
我想先隐藏所有列表,然后再隐藏所有列表。用户从可见列表中拖动一项,将其移到页面的热点上,其中onMouseOver
事件将隐藏可见列表并显示用户正在徘徊的那个,以便用户可以继续将该项拖动到该列表中。
目前,只要隐藏了源列表,便会取消拖动。我可以防止这种情况发生吗?
我认为这就是您想要的。如果通过将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>