保存成功
订阅成功
保存失败,请重试
提交成功
预订中

js 拖拽实现

¥2.99会员免费看
lordly
  1. 例如: html部分: <div class="box"> </div> css部分: .box{ background-color: pink; width:200px; height:200px; border-radius: 50%; position: absolute; top:20px; left:100px; } js部分: var box = document.getElementsByClassName('box')[0]; function drag (ele){ ele.onmousedown = function(e){ var e = e || window.event;
    //此处是为了兼容IE,因为IE中事件对象是作为全局对象( window.event )存在的; var pageX = e.pageX || e.clientX + document.documentElement.scrollLeft; var pageY = e.pageY || e.clientY + document.documentElement.scrollTop; //获取鼠标相对盒子的位置; var boxX = pageX - box.offsetLeft; var boxY = pageY - box.offsetTop; document.onmousemove = function(e){ var e = e || window.event; var pageX = e.pageX || e.clientX + document.documentElement.scrollLeft; var pageY = e.pageY || e.clientY + document.documentElement.scrollTop; //将鼠标当前的坐标值减去鼠标相对盒子的位置,得到盒子当时的位置并将其赋值给盒子,实现移动效果 box.style.left = pageX - boxX +'px'; box.style.top = pageY - boxY + 'px'; } }; document.onmouseup = function () { //清除盒子的移动事件; document.onmousemove = null; }; } ; drag(box)
预订截止倒计时 -128
详情
7 人已预订
40 预订成功
会员免费预订
¥2.99 原价预订
订阅须知

预订后,您将在 06月08日 之前获得一篇专享文章。

请务必 关注 GitChat 服务号 以查看活动进度及获取活动通知。

届时文章未达标,款项将退回到微信账户。

关注提示×
扫码关注公众号,获得 Chat 最新进展通知!
入群与作者交流×
扫码后回复关键字 入群
Chat·作者交流群
入群码
该二维码永久有效
严选标准
知道了
Chat 状态详情
开始预订
预订结果公布06月01日

预订达标,作者开始写作

审核未达标,本场 Chat 终止

作者文章审核结果公布06月08日

审核达标,文章发布

审核未达标,本场 Chat 终止

Chat 完结
×
已购列表