Use draggable to implement drag and drop, and carry parameters

Implemented in native Js

To implement drag and drop and carry data, you need to use HTML5's Drag and Drop API. First, set the draggable property to true on the dragged element:

<divdraggable="true">拖动我</div>

Then, set ondragover and ondrop event handlers on the target element to fire when the element is dragged into the target area:

<divondragover="allowDrop(event)"ondrop="drop(event)">放置区域</div>

Next, set an ondragstart event handler on the dragging element to set the data when the drag starts:

<divdraggable="true"ondragstart="drag(event)">拖动我</div>

In the drag event handler, you can call the setData method to set the data type and value to be passed:

functiondrag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

In the drop event handler, you can call the getData method to get the passed data type and value:

functiondrop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

To make an element disappear after being dragged and dropped, use the removeChild method in the drop event handler to remove the element from the DOM:

functiondrop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  var draggedElement = document.getElementById(data);
  ev.target.appendChild(draggedElement);
  draggedElement.parentNode.removeChild(draggedElement);
}

In this way, when the dragging element is dropped to the target area, it will be moved to the area and deleted from the original position, and the passed data can be obtained through the getData method.

implemented in vue

The way to implement drag-and-drop and carry data in Vue is similar to that of native JavaScript, but it needs to combine Vue's syntax and event handling methods. Here is a simple example:

<template><div><divclass="drag"v-for="item in items":key="item.id":draggable="true" @dragstart="dragStart(item, $event)">
      {
    
    { item.text }}
    </div><divclass="drop" @dragover.prevent @drop="drop($event)">
      放置区域
    </div></div></template><script>exportdefault {
  data() {
    return {
      items: [
        { id: 1, text: '拖动我' },
        { id: 2, text: '再拖动我' },
        { id: 3, text: '再再拖动我' },
      ],
    };
  },
  methods: {
    dragStart(item, event) {
      event.dataTransfer.setData('text/plain', item.id);
    },
    drop(event) {
      event.preventDefault();
      const itemId = event.dataTransfer.getData('text/plain');
      const draggedItem = this.items.find((item) => item.id === Number(itemId));
      const index = this.items.indexOf(draggedItem);
      this.items.splice(index, 1);
    },
  },
};
</script>

In the above example, we use the v-for directive to render each element in the items array as a draggable div element, and set the data type and value to be passed in the dragstart event handler. We also set the dragover and drop event handlers on the div element of the drop area, so that it will be triggered when the element is dragged to the target area, and get the passed data type and value in the drop event handler, and update the items based on these data Array, thus realizing the function of dragging and dropping and carrying data.

It should be noted that we call the prevent method in the dragover event handler to prevent the browser's default drag and drop behavior. In addition, instead of directly deleting elements during drag and drop, we update the items array, which works better with Vue's responsive data binding mechanism for more efficient updates and rendering.