欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML5拖放实现逻辑及代码讲解

程序员文章站 2022-07-01 23:04:42
1.拖放实现逻辑 开始拖动 ===> 拖动中 ===> 拖动结束(放手) ondragstart ===> ondragover ===> ondrop ondragstar...

1.拖放实现逻辑

开始拖动 ===> 拖动中 ===> 拖动结束(放手)

ondragstart ===> ondragover ===> ondrop

ondragstart 绑定在需要被拖动的dom上

ondragover和ondrop绑定在接受被拖动dom进入的dom上

2.实例

单个dom的拖动

<!doctype html>
<html>
<head>
    <title>drag</title>
    <style type="text/css">
        .wrapper{
            width: 400px;
            height: 200px;
            padding: 10px;
            border: 1px solid red;
        }
        .wrapper img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <p class="wrapper" ondragover="dragover(event)" ondrop="dragdrop(event)">
        <img id="dragimg" src="./login.jpg" draggable="true" ondragstart="dragstart(event)">
    </p>

    <p class="wrapper" ondragover="dragover(event)" ondrop="dragdrop(event)">

    </p>
</body>
<script type="text/javascript">
    function dragstart (event) {
        event.datatransfer.setdata('text', event.target.id);
    }
    function dragover(event) {
        event.preventdefault();
    }
    function dragdrop(event) {
        event.preventdefault();
        var data = event.datatransfer.getdata('text');
        event.target.appendchild(document.queryselector('#'+data));
    }
</script>
</html>

多个dom的拖动

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>draglist</title>
    <style type="text/css">
        #left{
            float: left;
            border: 1px solid red;
        }
        #right{
            float: right;
            border: 1px solid blue;
        }
        #left,#right{
            width: 300px;
            min-height: 400px;
        }
        .images img{
            max-width: 260px;
            max-height: 300px;
        }
    </style>
</head>
<body>
    <ul id="left">
        <li id="img1" class="images" draggable="true"><img src="login.jpg"></li>
        <li id="img2" class="images" draggable="true"><img src="loginu.png"></li>
        <li id="img3" class="images" draggable="true"><img src="反馈.png"></li>
    </ul>

    <ul id="right">
        <li id="img4" class="images" draggable="true"><img src="日落.png"></li>
        <li id="img5" class="images" draggable="true"><img src="等待.png"></li>
        <li id="img6" class="images" draggable="true"><img src="规则.png"></li>
    </ul>
</body>
<script type="text/javascript">
    window.onload = function () {
        function mypreventdefault(event) {
            if(event.preventdefault) {
                event.preventdefault();
            }else {
                event.returnvalue = false;
            }
        }
        function mydragover (event) {
            mypreventdefault(event);
        }

        function mydragdrop (event) {
            mypreventdefault(event);
            var data = event.datatransfer.getdata('text');
            console.log(data);
            event.target.appendchild(document.getelementbyid(data));
        }
        function mydragstart(event) {
            event.datatransfer.setdata('text', event.target.id);
        }


        var nodelist = document.queryselectorall('.images');
        for (var i = 0; i < nodelist.length; i++) {
            nodelist[i].addeventlistener('dragstart',mydragstart);  
        }
        document.getelementbyid('right').addeventlistener('dragover', mydragover);
        document.getelementbyid('right').addeventlistener('drop', mydragdrop);

        document.getelementbyid('left').addeventlistener('dragover', mydragover);
        document.getelementbyid('left').addeventlistener('drop', mydragdrop);

    }
</script>
</html>