js原生DIV拖曳

PROMULGATOR

年少不惧岁月长

上海市

← 彩色旋转加载loading动画

→ 获取div的top数值

相关代码

Html

Css

Js

window.onload = function() {
     //拖曳函数
     function tuoyeById(id) {

var oDiv = document.getElementById(id);
         var disX = 0,
             disY = 0;
         oDiv.onmousedown = function(ev) {
             var oEvent = ev || event;
             disX = oEvent.clientX - oDiv.offsetLeft;
             disY = oEvent.clientY - oDiv.offsetTop;
             document.onmousemove = function(ev) {
                 var oEvent = ev || event;
                 var l = oEvent.clientX - disX;
                 var t = oEvent.clientY - disY;
                 console.log(l);
                 if (l <= 0) {
                     l = 0
                 }
                 if (t < 0) {
                     t = 0
                 }
                 if (l > document.documentElement.clientWidth - oDiv.offsetWidth) {
                     l = document.documentElement.clientWidth - oDiv.offsetWidth;
                 }
                 if (t > document.documentElement.clientHeight - oDiv.offsetHeight) {
                     t = document.documentElement.clientHeight - oDiv.offsetHeight;
                 }
                 oDiv.style.left = l + 'px';
                 oDiv.style.top = t + 'px';
             }

document.onmouseup = function(ev) {
                 document.onmousemove = null;
                 document.onmouseup = null;
             }

}
     }
     tuoyeById("oDiv");
 }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js原生DIV拖曳



代码描述：简单的js拖曳

onmousedown() onmousemove() onmouseup()
的简单运用。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>js原生DIV拖曳-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号