JS拖拽(继承），H5拖拽

最新推荐文章于 2023-06-27 09:23:08 发布

一鲸落.万物生

最新推荐文章于 2023-06-27 09:23:08 发布

阅读量170

点赞数

分类专栏：前端之路花哨玩意儿文章标签： h5 js 拖拽

本文链接：https://blog.csdn.net/weixin_42927264/article/details/103381696

版权

前端之路同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

花哨玩意儿

11 篇文章 0 订阅

订阅专栏

JS实现拖拽

上代码吧

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="ldiv" 
        style="margin-left:100px ; background: blue; width: 100px;height: 100px;position: fixed;z-index: 2;">

    </div>
    <div id="rdiv" 
        style="margin-left:500px ; background: red; width: 100px;height: 100px;position: fixed;">

    </div>
    <script>
        let t_div;
        class Drag {
            constructor(id) {
                this.cdiv = document.querySelector(id)
                
                this.divX = 0;
                this.divY = 0;
                this.init();
            }

            init() {
              
                this.cdiv.onmousedown = function (ev) {
                    this.divX = ev.clientX - (this.cdiv.offsetLeft);
                    this.divY = ev.clientY - (this.cdiv.offsetTop);
                    document.onmousemove = this.fnMove.bind(this);
                    document.onmouseup = this.fnUp.bind(this);

                    return false;
                }.bind(this)
            }

            fnMove(ev) {
                this.cdiv.style.marginLeft = ev.clientX - (this.divX) + 'px';
                this.cdiv.style.marginTop = ev.clientY - (this.divY) + 'px';
            }

            fnUp() {
                document.onmousemove = null;
                document.onmouseup = null;
            }

        }

        class LimitDrag extends Drag{
            constructor(id){
                super(id);
            }

            fnMove(ev){
                super.fnMove(ev);
                if(this.cdiv.offsetLeft <0){
                    this.cdiv.style.marginLeft = 0;
                }
                if(this.cdiv.offsetTop <0){
                    this.cdiv.style.marginTop = 0;
                }
            }
        }

      

        new Drag('#ldiv');
        new LimitDrag('#rdiv');

    </script>
    <style>

    </style>
</body>

</html>

LimitDrag继承于Drag类，重写了fnMove()方法，限制了拖动范围

H5拖拽实现

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>H5拖动</title>
    <style>
        .droptarget {
            float: left;
            width: 100px;
            height: 35px;
            margin: 15px;
            border: 1px solid #aaaaaa;
        }

        #dragtarget {
            width: 100%;
            height: 100%;
            background: red;
            color: azure;
            margin: 0px;
            text-align: center;
            line-height: 35px;
        }
    </style>
</head>

<body>

    <div class="droptarget">
        <div draggable="true" id="dragtarget">
            <span>散步</span>
        </div>
    </div>
    <div class="droptarget"></div>
    <script>
        /* 拖动时触发*/
        document.addEventListener("dragstart", (event) => {
            //dataTransfer.setData()方法设置数据类型和拖动的数据
            event.dataTransfer.setData("Text", event.target.id);
            //修改拖动元素的透明度
            event.target.style.opacity = "0.4";
        });

        document.addEventListener("drag", function (event) {

        });
        // 当拖完p元素重置透明度
        document.addEventListener("dragend", function (event) {
            event.target.style.opacity = "1";
        });
        /* 拖动完成后触发 */
        // 当p元素完成拖动进入droptarget,改变div的边框样式
        document.addEventListener("dragenter", function (event) {
            if (event.target.className == "droptarget") {
                event.target.style.border = "3px dotted red";
            }
        });
        // 默认情况下,数据/元素不能在其他元素中被拖放。对于drop我们必须防止元素的默认处理
        document.addEventListener("dragover", function (event) {
            event.preventDefault();
        });
        // 当可拖放的p元素离开droptarget，重置div的边框样式
        document.addEventListener("dragleave", function (event) {
            if (event.target.className == "droptarget") {
                event.target.style.border = "";
            }
        });
        /*对于drop,防止浏览器的默认处理数据(在drop中链接是默认打开)
        复位输出文本的颜色和DIV的边框颜色
        利用dataTransfer.getData()方法获得拖放数据
        拖拖的数据元素id(“drag1”)
        拖拽元素附加到drop元素*/
        document.addEventListener("drop", function (event) {
            event.preventDefault();
            if (event.target.className == "droptarget") {
                event.target.style.border = "";
                var data = event.dataTransfer.getData("Text");
                event.target.appendChild(document.getElementById(data));
            }
        });
    </script>

</body>

</html>

这个就清晰多啦
h5的新特性，draggable属性，包括dom事件都非常清晰
在这里插入图片描述
希望给大家带来帮助。。。

一鲸落.万物生

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS拖拽(继承），H5拖拽

JS实现拖拽上代码吧<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...
复制链接

扫一扫