jQuery拖放 - 需要帮助

时间:2015-04-10 20:15:18

标签: jquery drag-and-drop

我正在将一个元素拖动到另一个div并将其丢弃。 (克隆) 我再次拖动相同的元素,因此droppable div上有2个相同的元素。

我单击一个已删除的对象,它会打开一个对话框,我会填写该对象并更改对象上的文本。

发生的事情是两个丢弃的元素都有相同的文本..

我的问题是:

如何区分掉落的元素,以便更改为不会影响其他元素

我感谢任何人的输入。

1 个答案:

答案 0 :(得分:1)

这个怎么样:

完全小提琴:https://jsfiddle.net/red2678/4vLf1usz/27/

// Draggable
$("#draggable").draggable({
    revert: 'invalid',
    cursor: 'move',
    helper: 'clone'
});

// Droppable
$("#droppable").droppable({
    drop: function (event, ui) {
        // $this is the dropped elements container
        // $dd is the div where the dropped elements are
        // count is the count of currently dropped divs (1 based)
        // item is a clone of the draggable element
        // -- on item I am setting the id attribute
        // -- to be the word "drop" and the count
        // -- ex: drop1, then drop2 and so on.
        var $this = $(this),
            $dd = $this.find('#droppedDivs'),
            count = $dd.find('> div').length + 1 || 1,
            $item = $(ui.draggable).clone().attr('id', 'drop' + count);

        // Change the dropped elements container h3 to show
        // the dropped count and add hightlight class
        $this.addClass("ui-state-highlight")
            .find("h3")
            .html("Dropped " + count + "!");

        // Change content of dropped div to "id is #drop" and the count
        $item.html('id is #drop' + count);

        // Append to the dropped elements container
        $dd.append($item);

        // Now all divs inside #droppedDivs have unique ids :)
    }
});