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

2019-07-29 10:12发布

我有一个可拖动/可排序集列出了我动态添加项目的，但麻烦的是，一旦项目已被添加，这是不可能将其移动到新名单。：你可以在这里看到的功能http://jsfiddle.net/Y4T32/2/

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

我发现在这里我想要的工作另一种答案，但一直无法重现他们得到的结果（当然，现在无法找到答案）。任何深入了解我做错了什么在这里？

Answer 1:

已更新ANSWER

你必须调用.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 Draggable/Sortable - Dynamically added items not draggable