js拖拽问题，求大神详解

Posted 2023-05-05

我要拖动红色的块，使文本的内容跟着滚动，整个内容是居中的，magin-top有100像素拖拽这个红色的块，鼠标的clientY要不要考虑减去这100个像素，求大神给出代码，最主要的是红色块的移动top需不需要鼠标的clientY减去100px，我是初学者。希望代码初级一点，不要太多的函数套函数，谢谢

参考技术A 可以使用mCustomScrollbar美化滚动条，或者使用原生的滚动条实现。overflow-y:scroll; 参考技术B 虽然我是大神，但是我还是看不懂 参考技术C 爆竹声声迎快乐，春联对对接幸福，水饺笼笼含健康，水果个个送平安，节目段段藏运气，笑声袅袅创和谐。春节到了，愿君生活更美好。 参考技术D 不用拖拽啊，放在最低部，用panel布局，您好！我是酷狗官方客服，首先感谢您长期以来对酷狗的喜欢和支持，我仅已自己代表深圳cool有限股份公司表达对你的感谢，您所选择的歌曲目前已经被东方传媒公司勒令强制下架，目前正在积极沟通版权购买意向，对您造成的不便深表歉意！如有疑问请联系客服[e-mail],谢谢合作，爱你哟 第5个回答  2019-02-22 阿朵偷怕我真的好想你何炅热烈祝贺漏赞提醒佩服你课题特警

简单的鼠标拖拽效果（原生js实现）

之前在聊天群里看到有人说面试的时候被问到了怎样实现一个拖拽效果，当时看到后在心里默默思考了下，结果发现好像我也写不出来啊。本着遇到一个解决一个的思想，就亲自敲了一个，看到张鑫旭大神写的代码，真的很厉害，多多学习了，（感觉随便搜一个关于前端方面的问题都能看到他的网站，真是太佩服了，写了那么多文章，十分感谢。）
好了，接下来就进入正题了。
想实现一个效果首先得明白其中的逻辑，知道了实现逻辑后，就可以码代码了。
首先我实现的效果是：

1. 鼠标按下后，才可以执行后续效果
2. 鼠标已经按下，然后鼠标移动，需要拖拽的元素跟着一起移动
3. 鼠标松开，然后停止移动

大步骤就是这样一个过程，其实对应的就是三个事件：

1. onmousedown
2. onmousemove
3. onmouseup

然后我们来看这三个事件发生时分别作做什么事。

当鼠标按下时，我们得记录当前元素的位置newSite。同时设置一个标记，用于表示此时鼠标时按下的状态，方便鼠标移动事件的执行。
当鼠标松开时，我们要将标记改变，说明此时鼠标松开了，当鼠标移动时就不能再移动元素了。
当鼠标按下并且移动时，我们就要记录鼠标每次移动的位置currentSite，currentSite和newSite的差值就是鼠标移动的距离，同时也是元素应该移动的距离，然后设置元素的位置就OK了。

当然有个很重要的点就是需要移动的元素的position属性应该设为absolute或者relative，这样元素才可以移动。
同时，如果该元素内部有可能导致浏览器默认事件发生的元素时，要阻止默认事件的发生，例如里面有一个图片时，点击拖动的时候浏览器会默认弹出一个新窗口显示该图片，这时我们应该阻止这个事件的发生。具体方式可以查看代码。

具体演示可查看：http://www.w3cfuns.com/notes/19044/b3c57594c1f1b220f1a102d4e9147828.html

 1 // 参数列表
 2 var params = {
 3     left: 0,
 4     top: 0,
 5     currentX: 0,
 6     currentY: 0,
 7     flag: false
 8 };
 9 //获取相关CSS属性
10 var getCss = function(o, key) {
11     // getComputedStyle是为了兼容FF浏览器
12     return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key];
13 };
14 
15 //拖拽的实现
16 var startDrag = function(target, callback) {
17     // 首先获取目标元素的left、top属性值
18     if (getCss(target, "left") !== "auto") {
19         params.left = getCss(target, "left");
20     }
21     if (getCss(target, "top") !== "auto") {
22         params.top = getCss(target, "top");
23     }
24     
25     target.onmousedown = function(event) {
26         // 当鼠标按下时表示元素可以移动，将标记设为true;
27         params.flag = true;
28         
29         /*为了阻止拖动浏览器中元素时发生默认事件，
30         例如拖动图片时会出现一个新窗口显示该图片，下面代码可以阻止这种事件发生
31         */
32         if (event.preventDefault) {
33             event.preventDefault();
34         }else {
35             event.returnValue = false;
36         }
37         
38         var e = event;
39         params.currentX = e.clientX;
40         params.currentY = e.clientY;
41     };
42     target.onmouseup = function() {
43         // 当鼠标松开时将标记设为false，表示不可移动
44         params.flag = false;
45         // 当鼠标松开时再次更新元素的位置
46         if (getCss(target, "left") !== "auto") {
47             params.left = getCss(target, "left");
48         }
49         if (getCss(target, "top") !== "auto") {
50             params.top = getCss(target, "top");
51         }
52     };
53     target.onmousemove = function(event) {
54         var e = event ? event : window.event;
55         /*当params.flag==true时才可以移动，表明此时鼠标时按下状态
56         */
57         if (params.flag) {
58             // 获取到当前鼠标的位置
59             var nowX = e.clientX,
60                 nowY = e.clientY;
61             // 获取当前鼠标移动的距离，即当前鼠标位置减去初始位置
62             var disX = nowX - params.currentX,
63                 disY = nowY - params.currentY;
64             // 将元素的位置更新，parsenInt为了将属性值变为数字类型
65             target.style.left = parseInt(params.left) + disX + "px";
66             target.style.top = parseInt(params.top) + disY + "px";
67         }
68     }
69 };

View Code