About the front-end upload file comprehensive basic literacy paste - --- H5 drag and drop incident

Keywords: Javascript html5 Mobile Attribute

H5 drag events (knowledge points mainly come from HTML 5 Drag and Drop)

Actually, I plan to produce the actual code. It seems that I can insert an additional drag-and-drop literacy paste, which is often used in uploading files on PC. Let's first look at the relevant knowledge points.
In HTML5, drag and drop is part of the standard, and any element can be dragged and dropped. Let's see how compatibility works first.

I can understand that the mobile end is red all over the line, after all, it's not the main application interaction.

First, to make the element draggable, set the draggable attribute to true: <p draggable="true"> element oh </p>.
The events inside are

Event describe
ondragstart An event triggered when the dragged element begins to be dragged. This event acts on the dragged element.
ondragenter An event triggered when a drag element enters the target element, which acts on the target element.
ondragover The event triggered when the drag element moves on the target element, which acts on the target element (by default, data/elements cannot be placed in other elements). If you need to set permissible placement, we must prevent the default processing of elements, event.preventDefault() method.)
ondrop The dragged element releases the triggered event at the same time as the mouse on the target element, which acts on the target element.
ondragend The event triggered when the drag is complete acts on the dragged element

Method has

Method Effect
setData Set the data type and value of the dragged element
getData Returns any data set to the same type in the setData() method



    <style type="text/css">
      #div2 {
        width: 200px;
        height: 100px;
        margin: 10px;
        padding: 10px;
        border: 1px solid #aaaaaa;
      #drag {
        width: 200px;
        height: 100px;
        background: red;


    <div id="div1" ondragenter="dragenter(event)" ondrop="drop(event)" ondragover="allowDrop(event)">
      <div id="drag" draggable="true"></div>
    <div id="div2" ondragenter="dragenter(event)" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br/>
    <p id='text1'></p>
    <p id='text2'></p>

    <script type="text/javascript">
      var text1 = document.querySelector('#text1'),
        text2 = document.querySelector('#text2'),
        drag = document.querySelector('#drag'),
        div1 = document.querySelector('#div1'),
        div2 = document.querySelector('#div2');

      drag.ondragstart = function (ev) {
        text1.innerHTML = 'Drag elements begin to be dragged';
        text2.innerHTML = '';
          .setData("Text", ev.target.id);

      drag.ondragend = function (ev) {
        text1.innerHTML = 'Drag and drop to complete';

      function allowDrop(ev) {

      function dragenter(ev) {
        text2.innerHTML = 'Drag elements into target elements';

      function drop(ev) {
        var data = ev
        text2.innerHTML = 'The dragged element opens the mouse at the same time on the target element';



That's all. Then you can use your imagination to make many interesting things.

Posted by xisle on Sat, 12 Oct 2019 08:48:21 -0700