jQuery UI Draggable/Sortable-动态添加的项目不可拖动 [英] jQuery UI Draggable/Sortable - Dynamically added items not draggable

问题描述

我有一组可拖动/可排序的列表，可以动态地向其中添加项目，但是麻烦的是，一旦添加了项目，就无法将它们移动到新列表中.您可以在此处看到此功能: http://jsfiddle.net/Y4T32/2/

I have a Draggable/Sortable set of lists that I am dynamically adding items to, but the trouble is, that once an item has been added, it's not possible to move them to the new lists. You can see the functionality here: http://jsfiddle.net/Y4T32/2/

将一个项目从可用列表拖到目标列表之一，您会发现我的意思.现在添加一个标注"，然后尝试将新项目拖到目标列之一.

Drag an item from the available list to one of the target lists, and you'll see that I mean. Now add a "callout" and try to drag the new item to one of the target columns.

我在这里找到了我想要的另一个答案，但是我无法再现他们得到的结果(当然，现在无法找到答案).对我在这里做错的任何见解吗?

I found another answer on here that works as I want, but have been unable to reproduce the results they got (and of course, can't find the answer now). Any insight into what I am doing wrong here?

推荐答案

更新后的答案

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

You have to call .draggable() for each element that gets added. The jQuery selector that you use at initialization time only applies to elements that exist at the moment, not to the ones you will create.

以下是一些应该起作用的JS:

Here's some JS that should work:

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-动态添加的项目不可拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！