其他分享
首页 > 其他分享> > js拖拽

js拖拽

作者:互联网

JS拖拽事件

首先,要有以下几个动作:
①鼠标按下
②鼠标移动
③鼠标松开

一.mousedown、mousemove和mouseup 拖着目标元素在页面任意位置
如果要设置物体拖拽,那么必须使用三个事件,并且这三个事件的使用顺序不能颠倒。

1.onmousedown:鼠标按下事件
2.onmousemove:鼠标移动事件
3.onmouseup:鼠标抬起事件

重点:

1、一定要绝对定位,脱离文档流才可以移动。

2、绑定拖拽的元素,移动和鼠标松开后是对document的绑定,因为移动的是整个div。

3、点击:a= 获取当前鼠标坐标、b =div距浏览器距离、c = 鼠标在div内部距离=a-b。

移动:通过 a - c 建立鼠标与div的关系,防止鼠标超出div。

基本思路:(以下来自网络)

拖拽状态 = 0鼠标在元素上按下的时候{

拖拽状态 = 1

记录下鼠标的x和y坐标

记录下元素的x和y坐标

}

鼠标在元素上移动的时候{

如果拖拽状态是0就什么也不做。

如果拖拽状态是1,那么

元素y = 现在鼠标y - 原来鼠标y + 原来元素y

元素x = 现在鼠标x - 原来鼠标x + 原来元素x

}

鼠标在任何时候放开的时候{

拖拽状态 = 0

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }
        #div2{
            width: 100px;
            height: 100px;
            background: yellow;
            position: absolute;
            left: 500px;
            top: 200px;

        }
    </style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
<script>
    var div1=document.getElementById('div1')
    div1.onmousedown=function (event) {
console.log(event.clientX)
        console.log(div1.offsetLeft)//div1的left值
        var chaX=event.clientX-div1.offsetLeft
        div1.onmousemove=function (event){
    console.log(event.clientX)
            div1.style.left=event.clientX-chaX+'px'
        }
        document.onmouseup=function () {
document,onmousemove=null
        }
    }

    document.onmousemove=function (event) {
    div1.style.left=event.clientX-chaX+'px'
        div1.style.top=event.clientY-chaY+'px'
        console.log(div1.offsetWidth/2,div2.offsetWidth/2,'半径')
        console.log(div2.offsetLeft-div1.off)
    }

</script>

 

标签:console,鼠标,元素,拖拽,js,event,div1
来源: https://www.cnblogs.com/Wxt12241110/p/15732915.html