编程知识 cdmana.com

HTML5 to achieve drag effect, detailed explanation of the principle and case implementation

 

As shown in the figure above , We can drag and drop images and hyperlinks from the blog Garden website .

stay HTML5 In the specification of , We can do this by adding  draggable="true"  To set whether the element can be dragged or not , The picture 、 Links are enabled by default .

1、 Drag and drop elements

The page has  draggable="true"  Attribute elements .

Examples are as follows :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <style>
    .box1{
        width: 200px;
        height: 200px;
        background-color: green;

    }
    </style>
</head>
<body>
    <!-- to  box1  Add drag properties -->
    <div class="box1" draggable="true"></div>
</body>
</html>

The effect is as follows :

 

 

Above picture , We give box1 Added draggable="true"  After the attributes , Find out box1 It can be dragged . But what's to be done after dragging and dropping ? This involves Event monitoring .

Event monitoring of drag and drop elements :( Apply to drag and drop elements )

  • ondragstart Call when drag starts
  • ondragleave  When When the mouse leaves the drag element call
  • ondragend  Call when drag ends
  • ondrag  The whole drag process calls

Code demonstration :

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="box" draggable="true"></div>

<script>
    var box = document.querySelector('.box');

    //   Binding drag and drop Events 

    //   Drag starts 
    box.ondragstart = function () {
        console.log(' Drag starts .');
    }

    //   Drag away : Triggered when the mouse leaves the dragged element 
    box.ondragleave = function () {
        console.log(' Drag away ..');
    }

    //   Drag end 
    box.ondragend = function () {
        console.log(' Drag end ...');
        console.log("---------------");
    }

    box.ondrag = function () {
        console.log(' Drag and drop ');
    }

</script>
</body>
</html>

The effect is as follows :

 

 

Print the results :

 

 

2、 Target element

for instance , You want to put elements A Drag to the element B in , So the element B It's the target element .

Any element in the page can be the target element .

Event listening for the target element :( Apply to target elements )

  • ondragenter  Called when the drag element enters
  • ondragover  When the drag element stays on the target element , It's going to trigger all the time ( Whether the drag element is moving or not )
  • ondrop  Called when you release the mouse over the target element
  • ondragleave  Called when the mouse leaves the target element

Code demonstration :

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .one {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background-color: green;
        }

        .two {
            position: relative;
            width: 200px;
            height: 200px;
            left: 300px;
            top: 100px;
            border: 1px solid #000;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="one" draggable="true"></div>
<div class="two"></div>

<script>
    var two = document.querySelector('.two');

    // Drag event of the target element 

    //  Triggered when the dragged element enters 
    two.ondragenter = function () {
        console.log(" coming .");
    }

    //  Triggered when the dragged element leaves 
    two.ondragleave = function () {

        console.log(" go ..");
    }

    //  When dragging elements in   On the target element , Continuous trigger 
    two.ondragover = function (e) {
        // Default behavior to prevent drag and drop events 
        e.preventDefault(); //【 important 】 Be sure to add this line of code , otherwise , Later methods  ondrop()  Unable to trigger .

        console.log("over...");
    }

    //  When you release the mouse over the target element, it triggers 
    two.ondrop = function () {
        console.log(" Let go of the mouse ....");
    }
</script>
</body>
</html>

Effect demonstration :

 

 

Be careful , In the top code , We added event.preventDefault() This method . If there is no such way , Back ondrop() Method cannot trigger . As shown in the figure below :

 

 

As shown in the figure above , Even the shape of the cursor tells us , Can't continue in the target element .

summary : If you want the drag element to do something in the target element , It has to be in  ondragover()  Riga event.preventDefault() This line of code .

Case study : Drag and drop exercise

Full code :

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .one {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }

        .one > div, .two > div {
            width: 98px;
            height: 98px;
            border: 1px solid #000;
            border-radius: 50%;
            background-color: red;
            float: left;
            text-align: center;
            line-height: 98px;
        }

        .two {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            position: absolute;
            left: 600px;
            top: 200px;
        }
    </style>
</head>
<body>
<div class="one">
    <div draggable="true">1</div>
    <div draggable="true">2</div>
    <div draggable="true">3</div>
    <div draggable="true">4</div>
    <div draggable="true">5</div>
    <div draggable="true">6</div>
    <div draggable="true">7</div>
    <div draggable="true">8</div>
</div>
<div class="two"></div>

<script>
    var boxs = document.querySelectorAll('.one div');
    //         Temporary boxes   Used to hold the element currently dragged 

    var two = document.querySelector('.two');

    var temp = null;
    //          to 8 Small boxes are bound to drag and drop events respectively 
    for (var i = 0; i < boxs.length; i++) {
        boxs[i].ondragstart = function () {
//                 Keep the current drag element 
            temp = this;
            console.log(temp);
        }

        boxs[i].ondragend = function () {
//                When the drag is over  , Empty temp
            temp = null;
            console.log(temp);
        }
    }

    //         Drag event of the target element 
    two.ondragover = function (e) {
//             The default behavior to prevent drag and drop 
        e.preventDefault();
    }
    //         When you release the mouse over the target element, it triggers 
    two.ondrop = function () {
//             Append the dragged element to  two Come inside 
        this.appendChild(temp);
    }
</script>
</body>
</html>

The effect is as follows :

 

版权声明
本文为[Li Honghong]所创,转载请带上原文链接,感谢

Scroll to Top