拖动效果
博客专区 > ycYinG 的博客 > 博客详情
拖动效果
ycYinG 发表于10个月前
拖动效果
  • 发表于 10个月前
  • 阅读 0
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

####主要完成效果: 当鼠标 在div#box内按下去并且移动鼠标,要求div#box跟着鼠标移动 ####主要思路: 1.将div进行绝对定位 2.已知鼠标坐标点的改变和鼠标相对于div#box的位置,获取div#box距离页面的边距
3.计算出div相对于页面的距离,将他赋值给left和top ####html代码实现

####css代码实现 #box { width: 300px; height: 300px; background: #ddd; position: absolute; top: 0; left: 0; } ####js代码实现 var box = document.getElementById('box'); //获取对象 #####(1)鼠标按下事件 box.onmousedown = function(ent) { // 1.先获取鼠标在div#box内的相对位置 var e = ent || event; // 兼容性 // 1.1 获取鼠标在当前页面的坐标点 var mx = e.pageX; var my = e.pageY; // 1.2 获取div距离页面的左边距和上边距 var left = box.offsetLeft; var top = box.offsetTop; // 1.3 获取鼠标在div#box内相对位置 var x = mx - left; var y = my - top;

    //2 重新获取相对位置
    // 鼠标移动事件
    document.onmousemove = function(ment) {
        var me = ment || event;
        // 2.1 重新获取鼠标相对于页面的坐标点
        var new_x = me.pageX;
        var new_y = me.pageY;
        // 2.2 获取div#box的偏移值
        var new_left = new_x - x;
        var new_top = new_y - y;
        //2.3获取div#box可以走动的最大横向距离以及最大纵向距离
        var totalWidth = document.documentElement.clientWidth - box.offsetWidth;  // div#box可以走动的最大横向距离:浏览器的总宽度-自身宽度
        var totalHeight = document.documentElement.clientHeight - box.offsetHeight;  // div#box可以走动的最大纵向距离:浏览器的总高度-自身高度
        // 2.4 判断获取的偏移值不能出浏览器
        if (new_left <= 0) {
            new_left = 0;
        } else if (new_left >= totalWidth) {
            new_left = totalWidth;
        }
        if (new_top <= 0) {
            new_top = 0;
        } else if (new_top >= totalHeight) {
            new_top = totalHeight;
        }
        // 2.5 将获取的结果赋值给div#box
        box.style.left = new_left + 'px';
        box.style.top = new_top + 'px';
    }
     }

#####(2) 鼠标抬起事件 box.onmouseup = function() { // 当抬起鼠标的时候,停止移动 document.onmousemove = null; }

共有 人打赏支持
粉丝 0
博文 10
码字总数 4889
×
ycYinG
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: