我正在使用可拖放的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的数组。现在，当用户对元素进行排序时，我希望此数组重新排序。我怎样才能做到这一点？ 最佳答案
如果我正确地理解了您，则应该在stop: afterDrop上添加.draggable()。仅在添加新项目时调用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>