How to copy and move drag-and-drop elements in Vue?

Vue is a popular JavaScript framework that provides a convenient drag-and-drop function, allowing us to easily copy and move elements. Next, let's take a look at how to copy and move drag-and-drop elements in Vue.

1. Basic implementation of drag-and-drop elements

To implement the copy and move of drag-and-drop elements in Vue, you first need to implement the basic drag-and-drop function of the element. The specific implementation method is as follows:

1. Add elements that need to be dragged in the template:

<div class="drag-element" draggable="true">拖拽我</div>

Here we have added a class named drag-element element, and set its draggable attribute to true, indicating that this element can be dragged.

2. Add an event listener to the Vue instance:

new Vue({
  el: '#app',
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData('text/plain', ''); // 设置数据类型为纯文本
      e.target.classList.add('dragging'); // 添加拖拽时的样式
    },
    handleDragEnd(e) {
      e.target.classList.remove('dragging'); // 移除拖拽时的样式
    }
  }
})

Here we listen to two events: dragstart and dragend. When the element starts to be dragged, the handleDragStart method will be called, in which the data type is set and the dragging style is added. When the dragging of the element ends, the handleDragEnd method will be called to remove the dragging style.

3. Set the style when dragging in the style:

.drag-element.dragging {
  opacity: 0.5;
}

Here we set a class name of .dragging, indicating that the element is being dragged The style when dragging. The specific style can be set according to your needs.

2. Implement the copying of drag-and-drop elements

After realizing the basic function of drag-and-drop elements, we can start to copy the elements. Copying elements requires setting the copied data in the dragstart event, and processing the copy logic in the drop event.

1. Set the copied data in the dragstart event:

handleDragStart(e) {
  const target = e.target.cloneNode(true); // 复制拖拽的元素
  e.dataTransfer.setData('text/plain', ''); // 设置数据类型为纯文本
  e.dataTransfer.setDragImage(target, 0, 0); // 设置拖拽时的图片
  this.$data.clone = target; // 保存复制的元素
}

Here we use the cloneNode method to copy the dragged element , and set the data type and image when dragging in the dataTransfer object, and save the copied elements in the Vue instance.

2. Handle the copy logic in the drop event:

handleDrop(e) {
  e.preventDefault(); // 阻止默认事件
  const newNode = this.$data.clone.cloneNode(true); // 复制元素
  const parent = e.target.parentNode; // 获取父元素
  parent.insertBefore(newNode, e.target); // 插入新元素
}

Here we first prevent the occurrence of the default event, and then get the copied element, parent element and the target element, and inserts the new element into the parent element. Complete the implementation of copying elements.

3. Realize the movement of drag-and-drop elements

After realizing the basic function of drag-and-drop elements, we can also realize the movement of elements. Moving elements requires handling the movement logic in the dragend and drop events.

1. Handle the logic of movement in the dragend event:

handleDragEnd(e) {
  e.target.classList.remove('dragging'); // 移除拖拽时的样式
  if (this.$data.source && this.$data.target) { // 判断是否存在源元素和目标元素
    const target = this.$data.target; // 目标元素
    const source = this.$data.source; // 源元素
    const parent = target.parentNode; // 目标元素的父元素
    const index = Array.from(parent.children).indexOf(target); // 目标元素的索引
    parent.insertBefore(source, index > -1 ? target : null); // 插入元素
    this.$data.target = null; // 重置目标元素
    this.$data.source = null; // 重置源元素
  }
}

Here we first remove the style when dragging, and then determine whether the source exists Element and target element, if present, get the parent element and index of the target element, source element and target element, and insert the source element before or after the target element.

2. Handle the logic of movement in the drop event:

handleDrop(e) {
  e.preventDefault(); // 阻止默认事件
  const source = this.$data.clone; // 获取复制的元素
  const target = e.target; // 获取目标元素
  if (source && target !== source) { // 判断是否为新元素
    this.$data.source = source; // 保存源元素
    this.$data.target = target; // 保存目标元素
  }
}

Here we first prevent the occurrence of the default event, and then obtain the copied element and target element and determine whether it is a new element. If it is not a new element, the source and target elements are saved.

4. Summary

Through the above implementation steps, we can easily copy and move drag-and-drop elements in Vue. It should be noted that we need to maintain data in a Vue instance during implementation and save the state and data of the dragged element. At the same time, we also need to handle the relationship between various events to ensure the smoothness and stability of drag elements.

The above is the detailed content of How to copy and move drag-and-drop elements in Vue?. For more information, please follow other related articles on the PHP Chinese website!