区分 jQuery UI sortable() 中的 drop 和 sort答案

【问题标题】：Differentiate between drop and sort in jQuery UI sortable()区分 jQuery UI sortable() 中的 drop 和 sort
【发布时间】：2019-07-07 15:03:44
【问题描述】：

我正在使用可拖动和可排序的 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 的数组。现在，当用户对元素进行排序时，我希望重新排序这个数组。我该怎么做？

【问题讨论】：

你能加一个小提琴或钢笔吗？

标签： javascript jquery jquery-ui drag-and-drop

【解决方案1】：

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

检查以下sn-p。

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>

【讨论】：

太棒了！但是另一件事停止了工作。在afterDrop() 内部，我正在尝试获取已删除元素的data-id。但是现在使用ui.item.attr("data-id") 但是现在 ui 对象没有它