jQuery拖放绑定多个项目

Question

我想要一个绑定到数组的项目列表。 例如 一个项目将有一个标题，描述和一个图像。

我将有一个投放PlaceHolder，将有一个或多个“标题，说明，图像”。

当我拖动项目到PlaceHolder组件将被更新，如果它们存在。

任何帮助，这将不胜感激。

Answer 1

可以得到被拖入与ui.draggable元素：

$(".draggable").draggable({ revert:true }); 
$("#placeholder").droppable({ 
    drop: function(event, ui) { 
     var draggable = $(ui.draggable); 
     var droppable = $(this); 

     // Update droppable using draggable's sub-itens 
     droppable.find(".title").html(draggable.find(".title").html()); 
     droppable.find(".description").html(draggable.find(".description").html()); 
     droppable.find(".image").attr("src",draggable.find(".image").attr("src")); 
    } 
}); 

其余部分将取决于你想用拖动的事：他们的子itens'的内容复制到占位？克隆并替换占位符？用原来的占位符替换？

上述示例假定您将使用拖动元素的内容更新占位符的内容（并且每个项目的属性将由类标识）。如果您需要更多关于可拖动的信息（例如，它们在源数组中的索引），则可以使用data函数。