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

Drag and drop event instructions
dragstart Triggered when drag elements start dragging
drag Keeps firing during drag and drop
dragend When the mouse is released after the drag is complete, the event is usually bound to the drag area
dragenter Triggered when a drag enters the target region, usually the target region is bound to this event
dragover Drag continues to trigger after it enters the target area. You can set visual effects such as drag for the target area. Generally, the target area is bound to this event
dragleave Triggered when the drag leaves the target region, usually bound to the target region
drop Triggered when the mouse is released after the drag is complete. This event is usually bound to the target region.In addition, the event must be triggered firstdragoverThe event blocks the default event, otherwisedropEvent does not fire. If you drag images and other files from the outside, you need to prevent the default behavior, otherwise the browser will open by default

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.