码迷,mamicode.com
首页 > Web开发 > 详细

js代码实现拖拽

时间:2020-11-17 12:29:07      阅读:20      评论:0      收藏:0      [点我收藏+]

标签:event   doc   style   移动   坐标   false   move   实现   计算   

很简单的思路,通过三个鼠标事件:点击、移动、抬起,只要计算出当前位置即可,如果是图片的话加入:e.preventDefault();即可

//获取元素
var dv = document.getElementById(‘dv‘);
var x = 0;
var y = 0;
var l = 0;
var t = 0;
var isDown = false;
//鼠标按下事件
dv.onmousedown = function(e) {
    //获取x坐标和y坐标
    x = e.clientX;
    y = e.clientY;

    //获取左部和顶部的偏移量
    l = dv.offsetLeft;
    t = dv.offsetTop;
    //开关打开
    isDown = true;
    //设置样式  
    dv.style.cursor = ‘move‘;
}
//鼠标移动
window.onmousemove = function(e) {
    if (isDown == false) {
        return;
    }
    //获取x和y
    var nx = e.clientX;
    var ny = e.clientY;
    //计算移动后的左偏移量和顶部的偏移量
    var nl = nx - (x - l);
    var nt = ny - (y - t);

    dv.style.left = nl + ‘px‘;
    dv.style.top = nt + ‘px‘;
}
//鼠标抬起事件
dv.onmouseup = function() {
    //开关关闭
    isDown = false;
    dv.style.cursor = ‘default‘;
}

 

js代码实现拖拽

标签:event   doc   style   移动   坐标   false   move   实现   计算   

原文地址:https://www.cnblogs.com/zhoudawei/p/13958490.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!