如何使可动态添加的列表元素在jquery中可拖动? [英] How to make dynamically added list elements draggable in jquery?

问题描述

这是我的代码，来自 http://jsfiddle.net/XUFUQ/1/

Here is my code from http://jsfiddle.net/XUFUQ/1/

$(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，然后在该列表上初始化可拖动对象，因此第一次可以拖动list1元素.在放入list2时，我正在调用addElements()函数来清除列表中的某些元素并将其添加到list1中.但是我无法拖动这些添加的元素.

On document ready method I am appending some elements to list1, and then I am initializing draggable on that list so for first time I am able to drag list1 elements. On dropping in list2 I am calling addElements() function to clear and add some elements to list1. But I am unable to drag these added elements.

如何使这些元素可拖动?

How can I make these elements draggable?

推荐答案

以下是根据更新 http://jsfiddle.net/XUFUQ/6/.最好将可重复使用的代码排除在外:

Here is an ugly version of what you need to do based on the update http://jsfiddle.net/XUFUQ/6/. Best to factor out the resuable code:

// 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.

Basically calling draggable only connects to the elements that exist at the time it is run. This adds the various mouse handling events to each element. If you add elements it knows nothing about them, so you need to call draggable again on those.

另外两个答案都给出了示例，您可以在何处添加可拖动对象以确保包括元素，但这只是编码练习.

这篇关于如何使可动态添加的列表元素在jquery中可拖动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！