javascript - jQuery UI Sortable 工作异常

Question

我正在尝试 jQuery UI Sortable .

我有 3 个 Div，它们一开始是不可见的，但如果单击按钮就会变得可见。然后，Divs 需要是可排序的。

它以某种方式工作，但是当我将一个 Div 拖到另一个 Div 上时，它不会为它“腾出位置”。因此下面的 Div 必须移开并为新的 Div 留出“空隙”。
奇怪的是，它只有在我删除定义它的 CSS 时才起作用，那些 Div 一开始是不可见的。

这是我的:

<style>
.myClass {
    display: none;
}
</style>
<script>
$(document).ready(function(){
    $('.content2').append("<div class='myClass' id='ro_1'>Div 1<div>");
    $('.content2').append("<div class='myClass' id='ro_2'>Div 2<div>");
    $('.content2').append("<div class='myClass' id='ro_3'>Div 3<div>");

    $( "button" ).click(function() {
        makeVisible();
    });

    $(function() {
        $( ".content2" ).sortable({
            connectWith: ".content2"
        }).disableSelection();
    });

    function makeVisible(){
        $('.myClass').css('display', 'block');
    }
});
</script>
<div class="content1"></div>
<div class="content2"></div>
<button>Visible</button>

fiddle :https://jsfiddle.net/kka1z1k7/5/

---

这是预期的行为(删除了 CSS):

https://jsfiddle.net/kka1z1k7/2/

编辑: 我用 Chrome 和 Firefox 检查了一下

Answer 1

问题是，占位符也将具有 myClass 类，因此根据您现有的 CSS 将不可见。您可以通过更新选择器以排除可排序助手来解决此问题:

.myClass:not(.ui-sortable-placeholder) {
  display: none;
}
.ui-sortable-placeholder{
  visibility:visible !important;
  border:1px solid black; /*for demo*/
}

默认情况下，jQuery UI 将助手可见性设置为 visibility:hidden，使其看起来像一个空白空间。如果你真的想看到它，你也应该覆盖它。

Demo