Question

HTML

<ul id="sortable" style="list-style: none;">
    <li style="display: inline;" id="dvi_138504">COMPUTER 138504</li>
    <li style="display: inline;" id="dvi_133456">COMPUTER 133456</li>
    <li style="display: inline;" id="dvi_133457">COMPUTER 133457</li>
</ul>Query string: <span id="query"></span> 
<br>Result: <span id="result"></span>
<br>

JS

$(document).ready(function () {
    $('ul').sortable({
        axis: 'x',
        stop: function (event, ui) {
            var data = $(this).sortable('toArray');
            $('#query').text(data);
        }
    });
});

如果你运行它，并在x轴上来回缓慢地拖动三个项目中的一个，其他两个有时会在你拖动的项目的上方和下方。如果你来回慢慢地拖动它，它甚至会像疯了一样闪烁。有没有办法防止这种行为，并将项目保持在同一条线上，当你拖动的项目在它们之间分开时分开？

Answer 1

您可以将#sortable样式设置为overflow: auto，将样式设置为float: left而不是display: inline

，从而解决此问题

以下是显示更改的代码更新： http://jsfiddle.net/A474W/

jquery-ui可排序的ul元素在使用x轴排序拖动内联元素时重新定位

1 个答案: