HTML5 拖拽元素接口的使用

最新推荐文章于 2024-07-31 18:12:12 发布

码农zqq

最新推荐文章于 2024-07-31 18:12:12 发布

阅读量112

点赞数 1

文章标签： html5

本文链接：https://blog.csdn.net/weixin_46512417/article/details/111319822

版权

效果展示

在这里插入图片描述

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        #div1 {
            float: left;
            width: 200px;
            height: 200px;
            margin-right: 30px;
            border: 1px solid #f00;
        }
        
        #div2 {
            float: left;
            width: 200px;
            height: 200px;
            border: 1px solid #0f0;
        }
        
        p {
            background-color: #00f;
        }
    </style>
</head>

<body>
    <!-- 若要拖拽元素，第一步则需要添加draggable属性 -->
    <div id="div1">
        <p id="drag-p" draggable="true">拖放元素</p>
    </div>
    <div id="div2"></div>

    <script>
        /*拖拽元素事件
                                1.ondrag : 元素被拖拽持续触发
                                2.ondragstart : 元素开始被拖拽时触发
                                3.ondragleave :元素被拖拽(鼠标)出自身范围时触发
                                4.ondragend :元素拖拽结束时触发
                                */
        var p = document.querySelector("#drag-p");
        p.ondrag = function() {
            // console.log("p:ondrag");
        }
        p.ondragstart = function() {
            console.log("p:ondragstart");
        }
        p.ondragend = function() {
            console.log("p:ondragend");
        }
        p.ondragleave = function() {
                console.log("p:ondragleave");
            }
            /*
            添加拖拽元素容器事件
            1.ondragenter 拖拽元素进入容器是触发
            2.ondragover 拖拽元素在容器内部时持续触发
            3.ondrop 拖拽元素在容器内释放时触发 默认不触发，需在ondragover手动取消默认事件
            4.ondragleave 拖拽元素离开容器时触发
            */
        var div2 = document.querySelector("#div2");
        div2.ondragenter = function() {
            console.log("div2:ondragenter");
        }
        div2.ondragleave = function() {
            console.log("div2:ondragleave");
        }
        div2.ondragover = function(e) {
            e.preventDefault();
            // console.log("div2:ondragover");
        }
        div2.ondrop = function() {
            console.log("div2:ondrop");
            this.appendChild(p);
        }
        div1.ondragover = function(e) {
            e.preventDefault();
            //console.log("div1:ondragover");
        }
        div1.ondrop = function() {
            console.log("div1:ondrop");
            this.appendChild(p);
        }
    </script>
</body>

</html>

代码改进

若要应用于整个文档，应将事件添加在document上

  <script>
        /* 拖拽元素事件
            1.ondrag : 元素被拖拽持续触发
            2.ondragstart : 元素开始被拖拽时触发
            3.ondragleave :元素被拖拽(鼠标)出自身范围时触发
            4.ondragend :元素拖拽结束时触发
            */
        //var obj = null;
        document.ondrag = function() {
            // console.log("p:ondrag");
        }
        document.ondragstart = function(e) {
            //console.log("p:ondragstart");
          // console.log(e);
            // obj = e.target;
            //此处用e.dataTransfer.setData()代替obj可减少全局变量创建
            //setData方法存储的值只能在drop中取
            //setData(format,data) format：数据类型：text/html text/uri-list、 Data:数据：一般是字符串
            e.dataTransfer.setData("text/html", e.target.id);
        }
        document.ondragend = function() {
            //console.log("p:ondragend");
        }
        document.ondragleave = function() {
                // console.log("p:ondragleave");
            }
            /*
            添加拖拽元素容器事件
            1.ondragenter 拖拽元素进入容器是触发
            2.ondragover 拖拽元素在容器内部时持续触发
            3.ondrop 拖拽元素在容器内释放时触发 默认不触发，需在ondragover手动取消默认事件
            4.ondragleave 拖拽元素离开容器时触发
            */
        document.ondragenter = function() {
            // console.log("div2:ondragenter");
        }
        document.ondragleave = function() {
            // console.log("div2:ondragleave");
        }
        document.ondragover = function(e) {
            e.preventDefault();
            // console.log("div2:ondragover");
        }
        document.ondrop = function(e) {
            // console.log("div2:ondrop");
            e.target.appendChild(document.getElementById(e.dataTransfer.getData("text/html")));
        }
    </script>

码农zqq

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
HTML5 拖拽元素接口的使用

效果展示代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
复制链接

扫一扫