jQuery Drag and Drop связывает несколько элементов

Question

Я хотел бы иметь список предметов, которые связаны с массивом. Например Элемент будет иметь название, описание и изображение.

У меня был бы Drop 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"));
    }
});

Остальное будет зависеть от того, что вы хотите сделать с помощью перетаскиваемого объекта: скопировать содержимое их дочерних элементов в заполнитель?клонировать и заменить заполнитель?заменить заполнитель на исходный?

В приведенном выше примере предполагается, что вы обновите содержимое заполнителя содержимым перетаскиваемых элементов (и что свойства каждого элемента будут идентифицироваться классом).Если вам нужна дополнительная информация о перетаскиваемом объекте (например, об их индексе в исходном массиве), можно использовать функцию data.