Talk about js drag events

This is the 30th day of my participation in the August Text Challenge.More challenges in August

preface

Yesterday we learned js clipboard events, today we will learn JS drag events.

introduce

Js drag events include dragstart, drag, dragend, Dragenter, dragover, dragleave, and drop events.

Show it in a table

In general:

dragstart.drag.dragendThe event is a drag and drop region binding

dragenter.dragover.dragleave.dropThe event is bound to the target region.

Note:

The draggable property must be set to true for the draggable area. This property indicates that the draggable area can be dragged, otherwise there is no effect.

The dataTransfer object

Because drag-and-drop typically involves transferring data, its Event object includes a dataTransfer object. Use this object to set drag effects and transfer data to see what fields it has

Methods:

• setData(key, value)

  Set the data to drag

• getData(key)

  Get dragged data

Properties:

• effectAllowed

  Currently, the types that can be displayed during dragging are None, copy, copyLink, copyMove, Link, linkMove, move, all, and uninitialized.

  Typically set in the Dragstart event. If none, drag is not allowed. The default value is uninitialized, which is not set and is equivalent to all (all types are allowed).

• dropEffect

  The type of mouse displayed in the target area during dragging or setting the type of mouse displayed in the target area. The value can be None, copy, link, or Move.

  Generally set in dragover event, also want to prevent the default event, otherwise no effect. If none, drag is not allowed.

  And the dropEffect value needs to be the same as Effectalhoward. Such as copyLink and Copy.

• files

  Array type. This property has a value when you drag and drop a file. Represents a list of files. Each item is a File object

• items

  Drag and drop a list of contents, each of which contains kind and Type attributes. (Refer to my clipboard event paste event, which I won’t cover here.)

  For plain text drag and drop, you need to call the setData(key, value) method for items to have a value. Pictures and other files are not needed.

• types

  Array type, a list of types that drag and drop data. The values are Files, text/ HTML, etc., and if you call setData(key, value), the value is key.

Simple implementation of a drag text example:

  <style>
    .drag-box..drop-box {
      width: 200px;
      height: 200px;
      float: left;
      border: 1px solid red;
      margin-right: 30px;
    }
  </style>
    <div class="drag-box">
    <div draggable="true">Hello, I am the answer CP3!</div>
  </div>
  <div class="drop-box"></div>
  <script>
    const dragBox = document.querySelector('.drag-box')
    const dropBox = document.querySelector('.drop-box')
    // Start dragging
    dragBox.addEventListener('dragstart'.(e) = > {
      e.dataTransfer.setData('name', e.target.innerText)
    })
    // Dragging
    dropBox.addEventListener('dragover'.(e) = > {
      e.dataTransfer.effectAllowed = 'copy'
      e.preventDefault();
      console.log('I'm dragover event')})// End of drag
    dropBox.addEventListener('drop'.(e) = > {
      console.log(e.dataTransfer.types)
      const items = e.dataTransfer.items
      for (let i = 0; i < items.length; i++) {
        items[i].getAsString((str) = > {
          console.log(str)
        })
      }
      const name = e.dataTransfer.getData('name')
      e.target.innerText = name
    })
  </script>
Copy the code

The effect is as follows:

conclusion

The above is my summary of JS drag events, we can copy the code to try, experience.

Thank you for reading.