案例 拖拽效果

拖拽案例

首先我们有一个需求

首先创建一个div盒子

<div></div>

添加样式

div{
  width : 300px;
  height : 300px;
  background-color: pink;
  position: absolute;
}

获取元素

document.querySelector('div')

设置div在点击时的坐标

var startX = 0
var startY = 0

设置div在点击时移动的距离(偏移量)

var eleLeft = 0
var eleTop = 0

     //定义一个开关，控制元素的移动效果
    var flag = false
    //给元素添加鼠标按下事件
    odiv.onmousedown = function (e) {
        console.log('鼠标按下事件触发');
        flag = true
        //获取坐标
        startX = e.clientX
        startY = e.clientY
        //获取元素的偏移量
        eleleft = odiv.offsetLeft
        eletop = odiv.offsetTop
    }
    //给document添加鼠标移动事件
    document.onmousemove = function (e) {
        console.log('鼠标移动事件触发');
        if (flag === false) {
            return
        }
        //获取新的坐标
        var newX = e.clientX
        var newY = e.clientY
        //计算移动距离
        var moveX = newX - startX
        var moveY = newY - startY
        //将移动距离和元素偏移量相加
        var x = moveX + eleleft
        var y = moveY + eletop
        //将添加的值赋值给元素样式
        odiv.style.left = x + 'px'
        odiv.style.top = y + 'px'
    }
    //给元素添加鼠标抬起事件
    odiv.onmouseup = function () {
        flag = false
        console.log('鼠标抬起事件触发');
    }