1

我对 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>
4

1 回答 1

0

尝试添加这个：

.ui-sortable-placeholder{
    display: none !important;
}
于 2013-07-09T22:39:49.790 回答