Jquery-ui 可排序 - 拖动时隐藏原始列表隐藏拖动的项目
[英]Jquery-ui sortable - hide the original list while dragging hides the dragged item
问题描述
I use Jquery-UI to do kind of a board.
我用 Jquery-UI 做一个板子。 Basicly I have 2 sortable lists, and I take elements from one list to drop it in the other one.基本上我有 2 个可排序的列表，我从一个列表中获取元素以将其放入另一个列表中。
System works well.系统运行良好。 Now I want to hide the container div of the first list while dragging an element to make the second list more visible.现在我想在拖动元素时隐藏第一个列表的容器 div 以使第二个列表更加可见。
To make it clear here is a simplified code:为了清楚起见，这里有一个简化的代码：
$(".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>
So The drag and drop works well (even when the first div disappears, I still can drop my "invisible" item in the second list.所以拖放效果很好（即使第一个 div 消失了，我仍然可以将我的“不可见”项目放在第二个列表中。
But it's still a bit problematic to not see my dragged object.但是看不到我拖的object还是有点问题的。
Any idea?任何想法？
Thanks谢谢
1 个解决方案
解决方案1
1 已采纳 2020-04-11 09:18:24
If I got your question right then, this is what I came up with to fix your issue, the problem was in your code is that you are add attribute display none to #list_one using $("#list_one").hide() which in tern hide your dragged element since it inside #list_one , to fix this I added a helper function that clone the dragged (not sure why clone helper didn't work) and append it to a different element (in my snippet <body> ) and once sorting drag stop it will remove the cloned element, here is a working snippet:如果我当时得到了您的问题，这就是我想出解决您的问题的方法，问题出在您的代码中是您使用 $("#list_one").hide() 将属性 display none 添加到#list_one在 tern 隐藏你拖动的元素，因为它在#list_one中，为了解决这个问题，我添加了一个克隆拖动的助手 function （不知道为什么克隆助手不起作用）和 append 它到不同的元素（在我的片段<body> ）一旦排序拖动停止，它将删除克隆的元素，这是一个工作片段：
$(".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>
in another note I would suggest that you don't hide the element just add lower opacity value to it, thats a better UX, here is a working snippet too:在另一个注释中，我建议您不要隐藏元素，只需为其添加较低的不透明度值，这是一个更好的 UX，这也是一个工作片段：
$(".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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.