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

【问题标题】：JQuery sortable elements not sortable and positioned to pointerJQuery 可排序元素不可排序并定位到指针
【发布时间】：2016-07-13 11:24:11
【问题描述】：

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

Here my code pen example

（要向列表中添加元素，只需单击“添加”几次。要启用可排序功能，请单击“排序”按钮。要禁用可排序功能，请单击“不可排序”）

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

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

【问题讨论】：

标签： javascript jquery-ui jquery-ui-sortable

【解决方案1】：

如果您删除 class="list-unstyled" 并将一个元素放在另一个元素之上，它会起作用！我认为问题出在你的 CSS 上。

【讨论】：

谢谢。我看到另一个问题是当元素在不同的列中时对它们进行排序......
您也可以将此作为答案发布。太好了，你解决了我最大的问题。非常感谢。

【解决方案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>

【讨论】：