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

我有一个可拖动/可排序的列表,我正在动态添加项目,但问题是,一旦添加了项目,就无法将它们移动到新列表。 你可以在这里看到这些function: 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 = $('
  • New Callout
  • ').draggable(draggable_opts); $('#sph-callout-portlet-avail').append(newCo); }); });​

    http://jsfiddle.net/SGevw/