原生JS实现拖放和拖动效果

最新推荐文章于 2021-10-20 20:25:09 发布

little_shallot

最新推荐文章于 2021-10-20 20:25:09 发布

阅读量425

点赞数

分类专栏：小案例文章标签： javascript 前端

本文链接：https://blog.csdn.net/little_shallot/article/details/114117513

版权

小案例专栏收录该内容

21 篇文章 2 订阅

订阅专栏

<body>
    <div class="div" id="dv" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
    <!-- ondrop:在可拖动元素放置在 <div> 元素中时执行 JavaScript: -->
    <!-- ondragover: 在元素正在拖动到放置目标时触发 -->

    <div id="dv1">重复拖拽</div>
    
    <div id="dv2" class="dv2" ondragstart="drag(event)" draggable="true"> 拖动放入</div>
    <!-- 为了使元素可拖动，把 draggable 属性设置为 true ： -->
    <!-- ondragstart:在用户开始拖动元素时执行 JavaScript -->
   
    </div>
    <script>
        var dv = document.getElementById('dv');
        var dv1 = document.getElementById('dv1');
        var dv2 = document.getElementById('dv2');
        var x = 0;
        var y = 0;
        var l = 0;
        var t = 0;
        var isDown = false;

        // 重复拖拽

        dv1.onmousedown = function (e) {
            //获取x坐标和y坐标
            x = e.clientX;
            y = e.clientY;
            //获取左部和顶部的偏移量
            l = dv1.offsetLeft;
            t = dv1.offsetTop;
            //开关打开
            isDown = true;
            //设置样式  
            dv1.style.cursor = 'move';
            onmousemove = function (ev) {
                console.log('触发拖拽')
                if (isDown == false) {
                    return;
                }
                //获取x和y
                var nx = ev.clientX;
                var ny = ev.clientY;
                //计算移动后的左偏移量和顶部的偏移量
                var nl = nx - (x - l);
                var nt = ny - (y - t);
                dv1.style.left = nl + "px";
                dv1.style.top = nt + "px";
            }
            // 判断是否放进内容区域
            onmouseup = function (e) {
                console.log(dv1.offsetLeft, (dv.clientWidth - dv1.clientWidth))
                if (dv1.offsetLeft > dv.offsetLeft && dv1.offsetLeft < dv1.offsetLeft + (dv.clientWidth - dv1.clientWidth)) {
                    if (dv1.offsetTop > dv.offsetTop && dv.offsetTop < dv1.offsetTop + (dv.offsetHeight - dv1.offsetHeight)) {
                        let w = dv.offsetLeft + (dv.clientWidth - dv1.clientWidth) / 2
                        let h = dv.offsetTop + (dv.offsetHeight - dv1.offsetHeight) / 2
                        dv1.style.left = w + "px"
                        dv1.style.top = h + "px"
                    }
                }
                //开关关闭
                isDown = false;
                dv2.style.cursor = 'default'
            }
        }

        // 拖动放入
        function allowDrop(ev) {
            ev.preventDefault();
            console.log('确定5')
        }

        function drag(ev) {
            ev.dataTransfer.setData("text", ev.target.id);
        }

        function drop(ev) {
            console.log('确定1')
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text");
            ev.target.appendChild(document.getElementById(data));
            dv2.className = 'dv3'
        }
    </script>

基本都是官网上有的例子，记录一下

little_shallot

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
原生JS实现拖放和拖动效果

<body> <div class="div" id="dv" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>   <div id="dv1">重复拖拽
复制链接

扫一扫