区分 jQuery UI sortable() 中的 drop 和 sort
Posted
技术标签:
【中文标题】区分 jQuery UI sortable() 中的 drop 和 sort【英文标题】：Differentiate between drop and sort in jQuery UI sortable() 【发布时间】：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 的数组。现在，当用户对元素进行排序时，我希望重新排序这个数组。我该怎么做？
【问题讨论】：
你能加一个小提琴或钢笔吗？ 【参考方案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 对象没有它以上是关于区分 jQuery UI sortable() 中的 drop 和 sort的主要内容，如果未能解决你的问题，请参考以下文章
jquery-ui-sortable，当列表被隐藏时如何防止取消？
jquery UI sortable：如何让原始可见直到下降？