Question

我对jQuery可排序UI插件的世界有点新鲜，我很难弄清楚为什么我的所有div连续下移，当其中一个被移动到另一个排序顺序时。它的垂直列表似乎工作得很好，但这对这个应用程序不起作用。

我无法添加图片，因为这是我的第一篇文章，但基本上就是这样，没有奇怪的边距或任何设置。

有两个容器可以交换信息，但我不认为这会对这个问题产生影响。如果有更合适的方法可以做到这一点，那么我更乐意接受建议。

    <!DOCTYPE html>
    <html>
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>Test</title>


    </head>
    <style>

    #List1, #List2
    {
        overflow-x: scroll;
        overflow-y: hidden;
        height:85px;
        width: 700px; /* not really your css, I used it in my test case */
        white-space:nowrap;

    }

    #List1 > DIV, #List2 > DIV
    {
        display: inline-block;
        width:85px;
        height:55px; 
        border:solid thin black;
        position:inherit;
        margin:inherit;
    }
    </style>
    <body>
    <div id="List1">
        <div>test1</div>
        <div>test2</div>
        <div>test3</div>
        <div>test4</div>

    </div>

    <div id="List2">
        <div>test5</div>
        <div>test6</div>
        <div>test7</div>
        <div>test8</div>
        <div>test9</div>
        <div>test10</div>

    </div>

    </body>
    </html>
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

        <script>
    $(function(){
        var sortlists = $("#List1, #List2").sortable(
        {
            appendTo: 'body',
            tolerance: 'pointer',
            connectWith: '#List1, #List2',
            revert: 'invalid',
            forceHelperSize: true,
            helper: 'original',
            scroll: true,
            cursorAt: { top: 0, left: 0 } 
        });
        $("#List1, #List2").disableSelection();

    });


    </script>
    </body>
    </html>

Answer 1

尝试添加此内容：

.ui-sortable-placeholder{
    display: none !important;
}

jQuery可排序/可拖动函数的问题DIV位置在拖动时移动

1 个答案: