jQuery UI sortable()中drop和sort的区别

Question

我正在使用 jquery UI 可拖动和可排序的拖放功能。当用户将字段拖入可放置区域时，我正在运行设置一个函数。这是我的代码

let initDrag = () => {
    $( ".draggable" ).draggable({
        connectToSortable: '.droppable',
        cursor: "crosshair",
        helper: "clone",
        opacity: 0.35,
        snap: true,
        refreshPositions: true
    })
}
let initSortable = () => {
    $( ".droppable" ).sortable({
        update: afterDrop
    });
}
let afterDrop = (event, ui) => {
    let fieldID = ui.item.attr("data-id");
    getFieldData(fieldID).then(fieldData => {
        fieldData[0].field.field_id = Date.now();
        formBuildingJSON.form_fields.push(fieldData[0]);
        console.log(formBuildingJSON);
    })
}

我只想运行这个 afterDrop() 函数当用户在可放置区域拖动字段时。但是只要用户对元素进行排序，这个函数也会触发。那么如何检测该字段是否被拖入或排序。我正在创建一个数组来存储所有被拖动元素的 ID。现在，当用户对元素进行排序时，我希望对这个数组进行重新排序。我该怎么做？

Answer 1

如果我理解正确，你应该在 .draggable() 上加上 stop: afterDrop。 afterDrop 方法仅在添加新项目时调用。您可以稍后重新排序这些项目，但不会再次触发。

检查以下代码段。

let afterDrop = (event, ui) => {
  console.log('afterDrop')
}

$(function () {
  $("#sortable").sortable({
    revert: true,
  });
  $("#draggable").draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid",
    stop: afterDrop
  });
  $("ul, li").disableSelection();
});

<!doctype html>
<html lang="en">

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>jQuery UI Draggable + Sortable</title>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <link rel="stylesheet" href="/resources/demos/style.css">
 <style>
  ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   margin-bottom: 10px;
  }

  li {
   margin: 5px;
   padding: 5px;
   width: 150px;
  }
 </style>
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>

 <ul>
  <li id="draggable" class="ui-state-highlight">Drag me down</li>
 </ul>

 <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>
 </ul>


</body>

</html>

jQuery UI sortable()中drop和sort的区别

Differentiate between drop and sort in jQuery UI sortable()

javascript

jquery

drag-and-drop

jquery-ui