Jquery-ui sortable - 隐藏原始列表，同时拖动隐藏被拖动的项目

Question

我用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 消失了，我仍然可以将我的 "invisible" 项目拖放到第二个列表中。

但是看不到我拖动的对象还是有点问题

有什么想法吗？

谢谢

Answer 1

如果我当时回答你的问题，这就是我想出的办法来解决你的问题，你的代码中的问题是你将属性显示 none 添加到 #list_one 使用$("#list_one").hide() 隐藏你拖动的元素，因为它在 #list_one 内't work) 并将其附加到不同的元素（在我的代码段 <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>

在另一条注释中，我建议您不要隐藏该元素，只需为其添加较低的不透明度值，这样的用户体验会更好，这也是一个有效的片段：

$(".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>

Jquery-ui sortable - 隐藏原始列表，同时拖动隐藏被拖动的项目

Jquery-ui sortable - hide the original list while dragging hides the dragged item

jquery

jquery-ui

jquery-ui-sortable