实现简单的元素拖拽

最新推荐文章于 2024-06-14 11:01:38 发布

星空之迹

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量865

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/JYB2106056288/article/details/121992169

版权

实现简单的元素拖拽

要实现元素拖拽，主要得获取到元素的初始位置，以及鼠标的开始点击位置，鼠标的松开位置。
话不多说，上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .drag{
            background-color: aquamarine;
            width: 100px;
            height: 100px;
            position:relative; 
        }
        .test{
            background-color: rgb(255, 14, 6);
            width: 100px;
            height: 100px;
            color:aquamarine;
        }
    </style>
</head>
<body>
    <div class="drag" 
    ondragstart="dragstart1()" 			//设置元素可拖拽，并监听开始结束拖拽事件
    ondragend="dragend1()"
    draggable="true"
    >拖拽</div>
    <div class="test">测试</div>
    <div class="test">测试2</div>
   
</body>
<script>
    let drag=document.getElementsByClassName('drag')[0];
    let x1,x2,y1,y2,originPosX,originPosY;
    let dragstart1=function(e){
        console.log('拖拽开始');
        console.log('drag.offsetLeft',drag.offsetLeft);  
        console.log('drag.offsetTop',drag.offsetTop);		//因为元素位置是以左上角来计算的，点击时一般不在左上角，所以要分开计算
        originPosX=drag.offsetLeft;                        //记录开始拖拽元素位置
        originPosY=drag.offsetTop;
         console.log('offsetX:',window.event.offsetX);  
         console.log('offsetY:',window.event.offsetY);
         x1=window.event.offsetX;                         //记录开始拖拽鼠标位置
         y1=window.event.offsetY;
    }
    let dragend1=function(){
        console.log('拖拽结束');
        console.log('offsetX:',window.event.offsetX);
        console.log('offsetY:',window.event.offsetY);
        x2=window.event.offsetX;                            //记录结束拖拽鼠标位置
        y2=window.event.offsetY;
        drag.style.left=originPosX+x2-x1+'px';            //元素最后位置为：元素开始位置+鼠标结束拖拽位置-鼠标开始拖拽位置(当然也别忘记加单位px)
        drag.style.top=originPosY+y2-y1+'px';				
    }
    keydown=function(){
        console.log('keydown');
    }
</script>
</html>