Question

在jQuery 2.1.4 + jQuery UI 1.11.4中使用此代码，我如何获取被拖动元素的id？

$( "#form" ).sortable({
    placeholder: "ui-state-highlight",
    update: function(event, ui) {
        //I WANNA GET DRAGGED ITEM ID HERE
    }
}).disableSelection();

请在此处查看示例： https://jsfiddle.net/u8r3b2nw/1/

PD：我已经在这里搜索过，但对我来说没什么用。感谢。

Answer 1

当项目被放入表格时，似乎正在剥离id。我找到了一个解决方法，但它非常混乱。我希望其他人可以为您提供更好的解决方案。

https://jsfiddle.net/mark_c/u8r3b2nw/4/

$(document).ready(function() {

    // Store the id in this scope
    var id;

    $(".item").draggable({
        helper: "clone",
        revert: "invalid",
        cursor: "move",
        cursorAt: {
            top: 20,
            left: 56
        },
        connectToSortable: '#form',

        // On drag start store the element's id.
        start: function () {
            id = this.id;
        }
    });

    $("#form").sortable({
        placeholder: "ui-state-highlight",
        update: function(event, ui) {

            // If the item doesn't have an id add it from the stored value.
            // Length check makes sure it isn't overwritten.

            if (!ui.item[0].id.length) {
                ui.item[0].id = id;
            }

            // Alert the id of the sorted element
            alert(ui.item[0].id);

        },
    }).disableSelection();
});

Answer 2

因为您要克隆拖动的元素而id必须是唯一的，所以它会从克隆中删除。如果您可以使用其他属性，例如data-id，则应该可以使用ui.item.attr('data-id')轻松访问。

但是在使用receive事件时我得到id，但它只在拖动期间触发，而不是排序。

$( "#form" ).sortable({
    placeholder: "ui-state-highlight",
    receive: function(event, ui) {
        console.log(ui.item.attr('id'));
    }
}).disableSelection();

另一种解决方法是将其移至draggable

$( ".item" ).draggable({
  helper: "clone",
  revert: "invalid",
  cursor: "move", cursorAt: { top: 20, left: 56 },
  connectToSortable: '#form',
  stop: function(event, ui) {
    console.log($(event.target).attr('id'));
  }
});

希望其中一个能为你效劳。

jQuery可排序，如何获取被拖动元素的id？

2 个答案: