jquery-ui sortable - 拖动时隐藏原始列表隐藏被拖动项答案

【问题标题】：Jquery-ui sortable - hide the original list while dragging hides the dragged itemjquery-ui sortable - 拖动时隐藏原始列表隐藏被拖动项
【发布时间】：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 消失了，我仍然可以将我的“不可见”项放在第二个列表中。

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

有什么想法吗？

谢谢

【问题讨论】：

标签： jquery jquery-ui jquery-ui-sortable

【解决方案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，那是因为它下面有一些链接列表，我可以在其中删除这个项目。所以改变不透明度不会让我访问这些列表。无论如何再次感谢
很高兴为您提供帮助:)