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

小案例 专栏收录该内容
14 篇文章 0 订阅
<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>

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

  • 0
    点赞
  • 1
    评论
  • 1
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页

打赏作者

little_shallot

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值