Introduction to the

Drag/Drop is a very common and common operation to grab an object and put it where you want it to go. In H5, drag and drop is a standard operation, any element can be dragged!! But!!!!! To implement drag, you need to add drag properties.

Drag the properties of H5: draggable: auto | true | false

Note: Links and images are draggable by default, so the draggable attribute is not required.

– Drag (Trigger event when dragging target)

  • Dragstart – This event is triggered when the element starts dragging

  • Drag – Triggers this event while the element is dragging

  • Dragend – Triggers this event after the element is dragged

– Drop (triggers an event when the target area is released)

  • Dragenter – This event is triggered when the dragged element enters the target area

  • Dragover – This event is triggered when the dragged element is dragged within the target area

  • Dragleave – Triggers this event when the dragged element leaves the target region

  • Drop – This event is triggered when the dragged element is dropped in the target area

Drag the steps

  1. Set the element attribute draggable to true
  <main class="main">
    <div class="left" id="left">
      <div class="txt-show">The left area</div>
      <div class="dargable txt" id="txt1" draggable="true">Moveable text one</div>
      <div class="dargable txt" id="txt2" draggable="true">Movable text ii</div>
      <div class="dargable txt" id="txt3" draggable="true">Moveable text three</div>
      <div class="dargable txt" id="txt4" draggable="true">Moveable text four</div>
      <div class="dargable txt" id="txt5" draggable="true">Movable text five</div>
    </div>
    <div class="right" id="right">
      <div class="txt-show">The right area</div>
    </div>
  </main>
Copy the code
  1. Drag the
  • Dragstart event: During drag-and-drop operation, data is stored and obtained through dataTransfer. Each event event object will have a dataTransfer object to store the dragged data. It can hold one or more data items and one or more data types.
  let left = document.getElementById('left')
  let target = document.getElementById('right')
  left.addEventListener('dragstart'.(event) = > {
    const target = event.target;
    SetData can be performed on the dataTransfer when the project drags ondragStart.
    // Drag, dataTransfer property, equal to transport vehicle
    // Use datatransfer.getData
    // At the end of the project drag, you can retrieve the value in the dataTransfer object.
    event.dataTransfer.setData('Text', target.id)
    // js events have a bubbling mechanism
    console.log('Drag starts dragging 1');
  })
Copy the code
  • Drag events: execute continuously during drag
  left.addEventListener('drag'.(event) = > {
    console.log('Drag is dragging 2');
  })
Copy the code
  • Dragend event: end
 left.addEventListener('dragend'.(event) = > {
    console.log('Dragend dragend 7');
  })
Copy the code
  1. Place the
  • Dragenter and Dragleave events: Enter or leave the target region
  target.addEventListener('dragenter'.(event) = > {
    console.log('Dragenter enters zone 3')
  })
    target.addEventListener('dragleave'.(event) = > {
    console.log('Dragleave leaves the drag area 5')})Copy the code
  • Dragover event: Cannot place data/elements into other elements by default. If you need to set to allow placement, block the element’s default behavior.
  target.addEventListener('dragover'.(event) = > {
    // Prevent default behavior
    event.preventDefault();
    console.log('Dragover drags in region 4')})Copy the code
  • Drop event: Drop
  target.addEventListener('drop'.(event) = > {
    console.log('Drop mouse 6')
    let drag_id = event.dataTransfer.getData('text')
    target.appendChild(document.getElementById(drag_id))
  })
Copy the code

The complete code

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <title>Document</title> <style>. Main {display: flex; justify-content:space-around; } .left { width: 300px; height: 500px; border: 1px solid lightseagreen; margin-right: 10px; /* background-color: green; */ } .right { width: 300px; height: 500px; border: 1px solid lightseagreen; text-align: center; padding: 1px; /* background: red; */ } .txt { border: 1px solid gray; margin: 1px; padding: 5px; cursor: move; } </style> </head> <body> <main class="main"> <div class="left" id="left"> <div class="txt-show"> left area </div> <div </div> <div class="dargable TXT "id="txt2" class="dargable TXT" id="txt2" Draggable ="true"> moveable text 2 </div> <div class="dargable TXT "id="txt3" draggable="true"> moveable text 3 </div> <div class="dargable" <div class="dargable TXT "id="txt5" draggable="true"> </div> <div class="right" id="right"> <div class="txt-show"> Right area </div> </div> </main> <script> let left = document.getElementById('left') let target = document.getElementById('right') left.addEventListener('dragstart', (event) = > {event. DataTransfer. SetData (' Text, target id). The console log (' drag drag start 1 '); }) target.addEventListener('dragstart', (event) => { const target = event.target; Event. The dataTransfer. SetData (' Text, target id)}) left the addEventListener (' drag '(event) = > {the console. The log (' drag drag are now 2'); }) left. AddEventListener ('dragend', (event) => {console.log('dragend ended 7'); }) target.addEventListener('dragenter', (event) => {console.log('dragenter enters zone 3')}) target.addeventListener ('dragover', (event) => {event.preventdefault (); Console. log('dragover dragover 4')}) left.addeventListener ('dragover', (event) => {event.preventdefault (); }) target.addEventListener('dragleave', (event) => {console.log('dragleave leaves drag area 5')}) target.addeventListener ('drop', (event) => { let drag_id = event.dataTransfer.getData('text') target.appendChild(document.getElementById(drag_id)) }) left.addEventListener('drop', (event) => { let drag_id = event.dataTransfer.getData('text') left.appendChild(document.getElementById(drag_id)) }) </script> </body> </html>Copy the code

reporter

  • Dragstart event realizes data storage and acquisition through dataTransfer. Each event event object will have a dataTransfer object to store the dragged data. You can perform a setData operation on the dataTransfer during the ondragStart event of the project drag. Event. The dataTransfer. SetData () to set value, at the end of the drag, can pass the event. The dataTransfer. GetData () to obtain the value of the dataTransfer object.

  • Browsers cannot place data/elements in other elements by default, so if you need to set up to allow placement, you should block the element’s default behavior. PreventDefault ().

  • You can change the drag effect by adding CSS styles. Example: dragSrc. ClassList. Add (” ds “). Use classList to add, remove, and switch CSS classes from an element. The classList property is read-only, but it can be modified using the add() and remove() methods.

  • Remove the element to another element using the appendChild() method.

  • HTML Drag and Drop API

  • DataTransfer()

  • HTML DOM appendChild() method

  • HTML DOM addEventListener() method