我有一组可拖动/可排序的列表,我正在动态添加项目,但问题是,一旦添加了项目,就无法将它们移动到新列表中。您可以在此处查看功能:http: //jsfiddle.net/Y4T32/2/
将一个项目从可用列表拖到目标列表之一,您就会明白我的意思。现在添加一个“标注”并尝试将新项目拖到目标列之一。
我在这里找到了另一个我想要的答案,但无法重现他们得到的结果(当然,现在找不到答案)。任何洞察我在这里做错了什么?
我有一组可拖动/可排序的列表,我正在动态添加项目,但问题是,一旦添加了项目,就无法将它们移动到新列表中。您可以在此处查看功能:http: //jsfiddle.net/Y4T32/2/
将一个项目从可用列表拖到目标列表之一,您就会明白我的意思。现在添加一个“标注”并尝试将新项目拖到目标列之一。
我在这里找到了另一个我想要的答案,但无法重现他们得到的结果(当然,现在找不到答案)。任何洞察我在这里做错了什么?
更新的答案
您必须调用.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);
});
});