js与h5的结合，初步学习。

最新推荐文章于 2024-07-20 08:51:01 发布

zjgyb37

最新推荐文章于 2024-07-20 08:51:01 发布

阅读量1.4k

点赞数 1

分类专栏：前端WEB 文章标签： javascript h5

本文链接：https://blog.csdn.net/zjgyb37/article/details/78254352

版权

前端WEB 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

初步学习拖放事件

首先了解一下与拖放事件有关的标签，拖动某元素时依次触发：

dragstart
drag
dragend

其次了解某元素拖动到一个你想要拖动的目标上，依次发生：

dragenter
dragover
dragleave或drop

了解元素的默认处理来自菜鸟教程

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <style type="text/css">
        *{
            margin:0;
            padding: 0;
            color: #ffffff;
        }
        #drag{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 20px auto;
        }
        #box{
            width: 400px;
            height: 400px;
            border: 2px solid red;
            margin: 40px auto;
        }
    </style>
</head>
<body>
    <div id="drag" draggable="true"></div>
    <div id="box"></div>
    <script>

        var drag = document.getElementById("drag");
        var box = document.getElementById("box");

        drag.ondragstart = function() {
            this.style.backgroundColor = "green";           
        };
        drag.ondrag = function() {
            this.innerHTML = "我被拖走了...";
        };
        document.addEventListener("dragenter",function(event){
            if(event.target.id == "box") {
                event.target.style.backgroundColor = "brown";
                event.target.innerHTML = "进入";
            }
        });

        // 默认情况下,数据/元素不能在其他元素中被拖放。对于drop我们必须防止元素的默认处理
        document.addEventListener("dragover", function(event) {
            event.preventDefault();
        });

        document.addEventListener("drop", function(event) {
            if(event.target.id == "box") {
                drag.innerHTML = "我从盒子回来的...";
                drag.style.backgroundColor = "rgb(255,255,0)";
            }
            else {
                drag.innerHTML = "我从盒子外面回来的";
                drag.style.backgroundColor = "rgb(255,0,255)";
            }
        });
        document.addEventListener("dragleave",function(event){
            if(event.target.id == "box") {
                event.target.style.backgroundColor = "pink";
                event.target.innerHTML = "出去";
            }
        });

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