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

Question

我的问题是我无法对无序列表中的元素进行排序。占位符始终显示在第一行，即第一个元素所在的位置。（当我拖动元素时）。 Oder 元素根本没有移动，也没有给当前拖动的元素 space（这应该是 sortable 的默认功能）。

（要向列表中添加元素，只需单击 'Add' 几次。要启用可排序功能，请单击按钮 'Sort'。要禁用可排序功能，请单击 'Not sortable'）

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

$("#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" 并将一个元素保持在另一个元素之上，它就可以工作！！我认为问题出在您的 css.

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 可排序元素不可排序且定位到指针

JQuery sortable elements not sortable and positioned to pointer

javascript

jquery-ui

jquery-ui-sortable