“This is the 15th day of my participation in the 2022 First Text Challenge,” the last article said that in the page, drag and drop can give users a good experience, but also introduced the implementation of JavaScript drag and drop method; This time I’m going to do drag and drop in a simpler way.

Drag and drop event

Using JavaScript to achieve drag and drop is too much trouble, maybe the gods saw the hard work of ordinary people, decided to save me, so out of the H5 drag and drop function. Easy to implement, just add the target object draggable=”true”, the object can achieve visual drag effect; Draggable accepts Boolean values that can only be passed in true or false; Drag and drop div as shown in the following code.

<div draggable="true"> <span> child element </span> </div>Copy the code

Drag and drop, not only for visual effects, we also need data processing, at this time, the gods provide some events, in the process of drag and drop, will be given a certain event at certain stages, so that we can do the corresponding data processing at certain stages. Some events are as follows:

  1. Dragstart: Triggered when the mouse clicks on the dragged object and starts dragging
  2. Drag: This event starts after the dragstart event is triggered, and continues to be triggered while moving, every few hundred milliseconds
  3. Dragover: Triggered when the dragged object is moved to a valid target object
  4. Dragenter: triggered when the dragged object enters a valid drop target, only once on entry and once on entry
  5. Dragleave: Triggered when the dragged object leaves a valid target element
  6. Drog: An event is triggered when a dragged object is moved to a valid drop target and released

use

  <div id='app'>
    <div id="drag"
      draggable="true" 
      @dragstart="dragstart"
    ></div>
    <div id="drop"
      @dragover="dragover"
      @dragenter="dragenter"
      @dragleave="dragleave"
      @drop="drop"
    >
    </div>
  </div> 
Copy the code
new Vue({
  el: "#app",
  data: {},
  methods: {
    dragstart(event) {
      console.log('dragstart')
    },
    dragover(event) {
      event.preventDefault()
      console.log('dragover')
    },
    dragenter(event) {
      console.log('dragenter')
    },
    dragleave(event) {
      console.log('dragleave')
    },
    drop(event) {
      console.log('drop')
    },
  }
})
Copy the code

The above code is a simple visual drag effect, without any data processing; There are two elements, drag and drop; When we click on drag and start moving the mouse, the dragStart event is immediately triggered to print ‘dragStart’; When we move the mouse into DROP, the dragenter event will be triggered immediately. Then moving the mouse in drop will trigger dragover all the time and print ‘dragover’ all the time until we release the mouse and drop the data into DROP, triggering the drop event will end. Alternatively, by moving the mouse out without releasing it, the DragLeave event is triggered. One thing to note here is that the default event must be prevented in the dragover event so that the drop becomes a valid target and the mouse style changes to a plus sign. A message cannot be passed in a dragover event because the object of the dragover event is the target area. That is, the DragEvent in a dragover is imposed as the target drop area and therefore will not be passed to the DROP.