jQuery拖放绑定多个项目

Question

我想要一个绑定到数组的项的列表。例如项目将具有标题、说明和图像。

我会有一个Drop占位符，它将有一个或多个"标题，描述，图像"。

当我将项目拖到占位符上时，组件将更新（如果存在）。

如有任何帮助，我们将不胜感激。

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"));
    }
});

其余的将取决于你想对可拖动的内容做什么：将其子站点的内容复制到占位符？是否被克隆并替换占位符？将占位符替换为原始占位符？

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