jquery-ui sortable - 拖动时隐藏原始列表隐藏被拖动项
Posted
技术标签:
【中文标题】jquery-ui sortable - 拖动时隐藏原始列表隐藏被拖动项【英文标题】：Jquery-ui sortable - hide the original list while dragging hides the dragged item 【发布时间】：2020-07-21 19:25:06 【问题描述】：我使用 Jquery-UI 来做一个板子。基本上我有 2 个可排序的列表，我从一个列表中取出元素并将其放入另一个列表中。
系统运行良好。现在我想在拖动元素的同时隐藏第一个列表的容器 div 以使第二个列表更加可见。
为了清楚起见，这里有一个简化的代码：
$(".sortable").sortable(
connectWith: ['.sortable'],
helper: "clone",
start: function (event, ui)
$("#list_one").hide()
);<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
</head>
<body>
<div id="list_one" style="border: 1px solid red">
<ul class="sortable" style="min-height: 100px">
<li id="my_item">my item</li>
</ul>
</div>
<div id="list_two" style="border: 1px solid blue">
<ul class="sortable" style="min-height: 100px">
</ul>
</div>
</body>
</html>所以拖放效果很好（即使第一个 div 消失了，我仍然可以将我的“不可见”项放在第二个列表中。
但是看不到我拖动的对象还是有点问题的。
有什么想法吗？
谢谢
【问题讨论】：
【参考方案1】：如果我当时得到了您的问题，这就是我想出解决您的问题的方法，问题在于您的代码中您使用 $("#list_one") 将属性 display none 添加到 #list_one。 hide() 它隐藏了你拖动的元素，因为它在#list_one 内，为了解决这个问题，我添加了一个克隆拖动的辅助函数（不确定为什么克隆辅助不起作用）并将其附加到不同的元素（在我的sn-p <body>) 并且一旦排序拖动停止，它将删除克隆的元素，这是一个有效的 sn-p：
$(".sortable1").sortable(
connectWith: ['.sortable2'],
helper: function (e, li)
copyHelper = li.clone().appendTo('body');
return copyHelper;
,
stop: function ()
copyHelper && copyHelper.remove();
$("#list_one").css('visibility', 'visible');
,
start: function (event, ui)
$("#list_one").css('visibility', 'hidden');
);
$(".sortable2").sortable();<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
</head>
<body>
<div id="list_one" style="border: 1px solid red">
<ul class="sortable1" style="min-height: 100px">
<li id="my_item1">my item</li>
<li id="my_item2">my item</li>
<li id="my_item3">my item</li>
</ul>
</div>
<div id="list_two" style="border: 1px solid blue">
<ul class="sortable2" style="min-height: 100px">
</ul>
</div>
<script>
</script>
</body>
</html>在另一个注释中，我建议您不要隐藏元素，只需为其添加较低的不透明度值，这是一个更好的用户体验，这里也是一个有效的 sn-p：
$(".sortable1").sortable(
connectWith: ['.sortable2'],
helper: function (e, li)
copyHelper = li.clone().appendTo('body');
return copyHelper;
,
stop: function ()
copyHelper && copyHelper.remove();
$("#list_one").css('opacity', 1);
,
start: function (event, ui)
$("#list_one").css('opacity', 0.3);
);
$(".sortable2").sortable();<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
</head>
<body>
<div id="list_one" style="border: 1px solid red">
<ul class="sortable1" style="min-height: 100px">
<li id="my_item1">my item</li>
<li id="my_item2">my item</li>
<li id="my_item3">my item</li>
</ul>
</div>
<div id="list_two" style="border: 1px solid blue">
<ul class="sortable2" style="min-height: 100px">
</ul>
</div>
<script>
</script>
</body>
</html>【讨论】：
是的，我明白了为什么它不起作用，但我不知道如何解决它......你给了我答案。非常感谢。是的，对于 UX，最好使用不透明度，但如果我想隐藏这个 div，那是因为它下面有一些链接列表，我可以在其中删除这个项目。所以改变不透明度不会让我访问这些列表。无论如何再次感谢 很高兴为您提供帮助:)以上是关于jquery-ui sortable - 拖动时隐藏原始列表隐藏被拖动项的主要内容，如果未能解决你的问题，请参考以下文章
jquery-ui sortable - 在列表之间移动任务