drug and drop замена блока на javascript (vue.js)
Есть массив объектов, который сверстан как 6 картинок.(циклом v-for). Так же сверстано по 6 серых блоков в двух колонках справа(простые div'ы). Нужно перенести картинку со своего места и вставить в один из блоков справа, При том что справа так же 2 массива: 1 - жанры, 2 - не являющиеся жанрами. Нужно перенести картинку и вставить в определенный серенький блок, вместо этого серого блока появляется эта картинка и объект этой картинки пушится в соответствующий массив.
Не пойму как реализовать так чтобы картинка заменяла серый блок.. Может не через дивы рисовать серые блоки?
Ответы (1 шт):
Вам нужно не перемещать блоки. Вам тем более не нужно перемещать элементы из DOM.
Вам нужно сделать компонент, который рендерит книгу или, если книги нет, пустой блок.
Далее, при заверении процесса Drag&Drop (подняли, перенесли, отпустили) из ячейки откуда перенесли книгу данные о книге удалять, а в тот компонент, куда перенесли - добавлять.
Для упрощения можно использовать какую-нибудь готовую библиотеку.
Например, первое, что попалось в поиске: https://github.com/cameronhimself/vue-drag-drop.