Question

我的问题是我无法在无序列表中对元素进行排序。占位符始终显示在第一行中，第一行是第一行。（当我拖动元素时）。 Oder元素根本不移动，并且没有为当前拖动的元素提供空间（这应该是可排序的默认功能）。

（要在列表中添加元素，只需点击几次＆＃39;添加＆＃39;若要启用可排序功能，请点击按钮＆＃39;排序＆＃39;。要停用可排序功能，请点击＆＃39;不可排序＆＃39）

对于可排序我有以下属性：

$("#btnSortable").click(function() {
  $("#ulNotes").sortable({
    handle: '.divText',
    tolerance: 'pointer',
    placeholder: 'sortablePlaceholder',
    forcePlaceholderSize: true,
    forceHelperSize: true,
    cursorAt: {left: 0, top: 0}        
  });
});

Answer 1

如果删除class="list-unstyled"并将元素放在另一个元素上方，它就可以了！我认为问题是你的问题。

Answer 2

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<style>
     #sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
     #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; float:left; border:1px solid black;width:30%;}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
    $( function() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
    });
</script>
</head>
<body>

    <ul id="sortable">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
        <li class="ui-state-default">Item 6</li>
        <li class="ui-state-default">Item 7</li>
    </ul>
</body>

JQuery可排序元素不可排序并定位到指针

2 个答案: