區分jQuery UI中的drop和sort sortable（）

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中的drop和sort sortable（）

問題描述

1 個解決方案

解決方案1
2 已采納 2019-02-16 02:09:36

區分jQuery UI中的drop和sort sortable（）

問題描述

1 個解決方案

解決方案1 2 已采納 2019-02-16 02:09:36

解決方案1
2 已采納 2019-02-16 02:09:36