Applied to events with towed elements (aircraft taking off)

  1. Ondrag applies to drag elements and is called throughout the drag process-- Continuous triggering
  2. Ondragstart applies to the drag element and is called when the drag starts
  3. Ondragleave applies to the drag element and is called when the mouse leaves the drag element
  4. Ondragend applies to the drag element and is called when the drag ends

Events applied to the target element (airfield where the fighter landed)

  1. Ondragenter applies to the target element and is called when the drag element enters
  2. Ondragover applies to the target element and is called when it stays on the target element-- Continuous triggering
  3. Ondrop applies to the target element and is called when the mouse is released over the target element
  4. Ondragleave applies to the target element and is called when the mouse leaves the target element

Property set && gets

e.dataTransfer.setData("a"."Set value");
e.dataTransfer.getData("a");
functiondrop(e) { <! -- Try console.log(e), here you can get a lot of apis you can use --> e.datatransfer.setData ("a", e.target.id);
}

Copy the code

Drag the elements

The draggable=”true” attribute is added to the dragged element

Some points to note:

Drop must be accompanied by dragover, otherwise the event will not take effect

document.getElementById('right').ondragover = function(ev) { ev.preventDefault(); // Prevent bubbling up} document.getelementById ('right').ondrop = function(ev) { ev.preventDefault(); // Prevents console. Log from bubbling up ("Into");
}
Copy the code

React events must be humped, for example, onDragOver

Native should be added to UI library components in Vue, such as @drop.native

Complete test case

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            position: relative;
            margin-left:20px;
            float: left;
        }
        .div2{
            width: 200px;
            height: 200px;
            border: 1px solid blue;
            position: relative;
            margin-left:20px;
            float: left;
        }
        .div3{
            width: 200px;
            height: 200px;
            border: 1px solid green;
            position: relative;
            margin-left:20px;
            float: left;
        }
        p{
            background-color: orange;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div class="div1" id="div1"> <! In H5, if you want to drag an element, you must add draggable= to the element"true"Images and hyperlinks can be dragged and dropped by default --> <p id="pe" draggable="true"> Try dragging me </p> <p id="pe1" draggable="true"> try dragging me to </p> </div> <div class="div2" id="div2"></div>
<div class="div3" id="div3"></div> <script> /* learn drag events */ var p=document.querySelector("#pe1");
    var div2=document.querySelector("#div2");
    var div3=document.querySelector("#div3"); /* OnDrag applies to the drag element and is called throughout the drag process -- onDragStart applies to the drag element and onDragLeave applies to the drag element when the drag starts, Ondragend is called when the mouse moves away from the drag element and */ p.on DragStart = is called when the drag endsfunction(e){
        console.log("Start");
        e.dataTransfer.setDate("a")
    }
    p.ondragend=function(){
        console.log("The end");
    }
    p.ondragleave=function(){
        console.log("Leave the target");
    }
    p.ondrag=function(){
        // console.log("Continuous trigger --111111"); } /* OnDragEnter applies to the target element, onDragover applies to the target element when the drag element comes in, onDrop applies to the target element when it stays on the target element, Ondragleave is called when the mouse is released over the target element and */ div2.onDragEnter = is called when the mouse is away from the target elementfunction(){
        console.log("To target 1.");
    }
    div2.ondragover=function(e){
        console.log(e);
        console.log("Hover on target 1.");
        //console.log("ondragover"); /* If you want to trigger the ondrop event, you must block the browser's default behavior at this location */ e.preventDefault(); } /* Browsers block onDROP events by default: we must block the browser's default behavior in ondragover */ div2.ondrop=function(){
        console.log("Lock on target one and land."); /* Add the dragged element to the current target element */ div2.appendChild(p); } div2.ondragleave=function(){
        console.log("Exit target 1");
    }

    div3.ondragenter=function(){
        console.log("To Target 2.");
    }
 
    div3.ondragover=function(e){
        console.log("Hover on target 2.");
        //console.log("ondragover"); /* If you want to trigger the ondrop event, you must block the browser's default behavior at this location */ e.preventDefault(); } div3.ondrop=function(){
        console.log("Lock on target two and descend."); /* Add the dragged element to the current target element */ div3.appendChild(p); } div3.ondragleave=function(){
        console.log("Exit target 2");
    }
</script>
</body>
</html>
Copy the code