Question

我有一个可拖动/可排序的列表，我正在动态添加项目，但问题是，一旦添加了项目，就无法将它们移动到新列表。您可以在此处查看功能：http://jsfiddle.net/Y4T32/2/

将项目从可用列表拖到其中一个目标列表，您将看到我的意思。现在添加一个“标注”并尝试将新项目拖动到其中一个目标列。

我在这里找到了另一个按照我的意愿工作的答案，但却无法重现他们得到的结果（当然，现在找不到答案）。我对这里的错误有任何见解吗？

Answer 1

更新的答案

您必须为添加的每个元素调用.draggable()。您在初始化时使用的jQuery选择器仅适用于当前存在的元素，而不适用于您将创建的元素。

这里有一些应该有效的JS：

var draggable_opts = {
            connectToSortable: ".sph-callout-portlet",
            helper: "clone",
            opacity: 0.75,
            revert: 'invalid',
            stop: function(event, ui) {
                //alert(ui)
            }
        };

$(function() {
    $( ".sph-callout-portlet" ).sortable({
        opacity: 0.75,
        placeholder: "ui-state-highlight",
    }).disableSelection();

    $( "#sph-callout-portlet-avail li" ).draggable(draggable_opts);

    $(document).on("click",'#addNewCo',function(e){
        e.preventDefault();
        var newCo = $('<li>New Callout</li>').draggable(draggable_opts);
        $('#sph-callout-portlet-avail').append(newCo);
    });
});

http://jsfiddle.net/SGevw/

jQuery UI可拖动/可排序 - 动态添加的项目不可拖动

1 个答案: