Question

的代码

$(document).ready(function()
    {
        addElements();
    }
);

function addElements()
{
    $("#list1").empty().append(
        "<li id='item1' class='list1Items'>Item 1</li>"+
        "<li id='item2' class='list1Items'>Item 2</li>"+
        "<li id='item3' class='list1Items'>Item 3</li>"
    );
}

$(function() {
    // there's the gallery and the trash
    var $gallery = $( "#list1" ),
    $trash = $( "#list2" );

    // let the gallery items be draggable
    $( "li", $gallery ).draggable({
        cancel: "button", // these elements won't initiate dragging
        revert: "invalid", // when not dropped, the item will revert back to its initial position
        containment: "document",
        helper: "clone",
        cursor: "move"
    });

    // let the trash be droppable, accepting the gallery items
    $trash.droppable({
        accept: "#list1 > li",
        drop: function( event, ui ) {
            $("#list2").append(ui.draggable);
            addElements();
    }
    });


});

在文档就绪方法上我将一些元素附加到list1，然后我在该列表上初始化draggable，所以我第一次能够拖动list1元素。在list2中删除我调用addElements（）函数来清除并向list1添加一些元素。但我无法拖动这些添加的元素。

如何使这些元素可拖动？

Answer 1

这是我为未来寻求者做的一个小技巧:) 这段代码只需要运行一次，而且几乎不言自明。

//The "on" event is assigned to the "document" element which is always available within the context
//Capture all the "mouseenter" event to any child element of "document" with a specific class (you can you any valid jQuery selector you like)
//any live and dynamic element with the class will become draggable (haven't tested on touchscreen devices)
$(document).on("mouseenter", '.someClass', function(e){
 var item = $(this); 
 //check if the item is already draggable
 if (!item.is('.ui-draggable')) {
         //make the item draggable
         item.draggable({
            .............
         });
  }
});

干杯！

Answer 2

根据更新http://jsfiddle.net/XUFUQ/6/，这是您需要做的丑陋版本。最好将可恢复代码分解出来：

// let the trash be droppable, accepting the gallery items
$trash.droppable({
    accept: "#list1 > li",
    drop: function( event, ui ) {
        $("#list2").append(ui.draggable);
        addElements();
        $( "li", $gallery ).draggable({
            cancel: "button", // these elements won't initiate dragging
            revert: "invalid", // when not dropped, the item will revert back to its initial position
            containment: "document",
            helper: "clone",
            cursor: "move"
           })
        }
});

基本上调用draggable只会连接到运行时存在的元素。这会将各种鼠标处理事件添加到每个元素。如果你添加元素，它对它们一无所知，所以你需要再次调用draggable。

其他两个答案都举例说明了你可以在哪里添加draggable以确保包含元素，但这是一个编码练习。

Answer 3

让新添加的元素再次拖动。

function addElements()
{
    $("#list1").empty().append(
        "<li id='item1' class='list1Items'>Item 1</li>"+
        "<li id='item2' class='list1Items'>Item 2</li>"+
        "<li id='item3' class='list1Items'>Item 3</li>"
    );
    $("#list1 li").draggable({
        cancel: "button", // these elements won't initiate dragging
        revert: "invalid", // when not dropped, the item will revert back to its initial position
        containment: "document",
        helper: "clone",
        cursor: "move"
    });
}

这是fiddle

Answer 4

    function addElements()
    {
        $("#list1").empty().append(
            "<li id='item1' class='list1Items'>Item 1</li>"+
            "<li id='item2' class='list1Items'>Item 2</li>"+
            "<li id='item3' class='list1Items'>Item 3</li>"
        );
        // there's the gallery and the trash
        var $gallery = $( "#list1" );


   $( "li", $gallery ).draggable({
            cancel: "button", // these elements won't initiate dragging
            revert: "invalid", // when not dropped, the item will revert back to its initial position
            containment: "document",
            helper: "clone",
            cursor: "move"
        });

}

您必须在“addElement（）”中推送“.draggable（）”方法。顺便说一下，你可以在你附加在画廊中的每个列表上附上dragragble函数。

检查这个小提琴是否有修正。 http://jsfiddle.net/XUFUQ/7/

Answer 5

试试这个：

$(document).ready(function () {
    addElements();

    var $gallery = $("#list1"),
        $trash = $("#list2");

$("li", $gallery).draggable({
    cancel: "button", 
    revert: "invalid", 
    containment: "document",
    helper: "clone",
    cursor: "move"
});

$trash.droppable({
    accept: "#list1 > li",
    drop: function (event, ui) {
        $("#list2").append(ui.draggable);
        addElements();
    }
});
});

function addElements() {
$("#list1").empty().append(
    "<li id='item1' class='list1Items'>Item 1</li>" +
    "<li id='item2' class='list1Items'>Item 2</li>" +
    "<li id='item3' class='list1Items'>Item 3</li>");

$("#list1 > li").draggable({
    cancel: "button", // these elements won't initiate dragging
    revert: "invalid", // when not dropped, the item will revert back to its initial position
    containment: "document",
    helper: "clone",
    cursor: "move"
});

$("#list2").droppable({
    accept: "#list1 > li",
    drop: function (event, ui) {
        $("#list2").append(ui.draggable);
        addElements();
    }
});
}

JSFIDDLE DEMO

如何动态添加列表元素在jquery中可拖动？

5 个答案: