Когда речь идет о перетаскивании превью изображений в Vue.js и изменении исходного массива после этого, можно использовать события перетаскивания и методы Vue.js для достижения нужного результата.
1. Определите компонент, который будет отображать превью фото и позволять пользователю его перетаскивать. В компоненте должны быть следующие части:
- HTML-код для отображения превью фото;
- События перетаскивания (dragstart, dragenter, dragover, dragleave, drop);
- Методы, связанные с событиями перетаскивания, для обработки действий пользователя и взаимодействия с исходным массивом.
2. Добавьте в исходный массив свойство, которое будет использоваться для отслеживания порядка перетаскивания. Например, вы можете добавить свойство order для каждого элемента массива и установить его начальное значение равным индексу элемента в массиве. Это позволит вам узнать, в каком порядке элементы были перетаскиваны.
3. В событии dragstart, установите данные перетаскиваемого элемента с помощью метода setData. Например, вы можете установить данные в виде строки, содержащей индекс элемента в исходном массиве.
4. В событиях dragover и drop, предотвратите стандартное поведение браузера с помощью метода preventDefault и метода stopPropagation. Затем получите данные перетаскиваемого элемента с помощью метода getData и обработайте их. Например, вы можете получить индекс элемента и использовать его для перемещения элемента в новое положение в исходном массиве.
5. В событии drop, измените порядок элементов в исходном массиве с помощью метода splice. Например, вы можете использовать полученный индекс элемента и данных элемента, чтобы определить новую позицию элемента в массиве. Затем удалите элемент из исходного массива с помощью метода splice и вставьте его в новую позицию.
6. Обновите представление данных, чтобы отразить изменения в исходном массиве.
Ниже приведен пример компонента Vue.js, который демонстрирует эту концепцию:
<template>
<div>
<div v-for="(item, index) in items" :key="item.id" draggable="true" @dragstart="dragStart(index)" @dragover="dragOver($event)" @drop="drop(index)">
<img :src="item.imageUrl" alt="Item preview" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, imageUrl: "url1", order: 0 },
{ id: 2, imageUrl: "url2", order: 1 },
{ id: 3, imageUrl: "url3", order: 2 },
],
};
},
methods: {
dragStart(index) {
event.dataTransfer.setData("index", index);
},
dragOver(event) {
event.preventDefault();
event.stopPropagation();
},
drop(newIndex) {
const oldIndex = event.dataTransfer.getData("index");
const item = this.items.splice(oldIndex, 1)[0];
this.items.splice(newIndex, 0, item);
},
},
};
</script>
В этом примере компонент Vue.js отображает превью фото для каждого элемента в динамическом массиве items. Каждый элемент имеет свойство order, которое отслеживает порядок элементов. Событие dragstart устанавливает данные перетаскиваемого элемента, основанные на его индексе в массиве. События dragover и drop предотвращают стандартное поведение браузера, а затем обрабатывают данные перетаскиваемого элемента, перемещая его в новую позицию в исходном массиве.
Это только базовая реализация перетаскивания превью фото и изменения исходного массива в Vue.js. Вы можете добавить дополнительную функциональность или стилизацию в соответствии с вашими потребностями.