js解决movebox移动问题

2019-11-20 10:19:58

字体：大中小

来源：转载

供稿：网友

本文为大家分享了js解决movebox移动问题，并且取消图片默认拖动事件的相关操作，供大家参考，具体内容如下

html:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   <link href="../Content/StyleSheet5.css" rel="stylesheet" />   <script src="../Scripts/JavaScript5.js"></script>   <title></title>   <meta charset="utf-8" /> </head> <body>   <div id="center">     <div id="black"></div>     <div id="movebox">       <img id="moveimg" src="../Images/b.jpg"/>     </div>     <img id="bigimg" src="../Images/b.jpg" />   </div> </body> </html>

js:

var movebox; window.onload = function () {   movebox = document.getElementById("movebox");   movebox.addEventListener("mousedown", function (e) {     if (e.button > 0) {       fun2();       return false;     }     e.preventDefault && e.preventDefault(); //明哥：去掉图片拖动响应 狠重要     gen.x = e.clientX;     gen.y = e.clientY;     gen._x = movebox.offsetLeft;     gen._y = movebox.offsetTop;     gen.dx = gen.x - gen._x;     gen.dy = gen.y - gen._y;     document.addEventListener("mousemove",fun1,false);     document.addEventListener("mouseup", fun2, false);   }, false); }; var fun1 = function (e) {   gen.L = e.clientX - gen.dx;   gen.T = e.clientY - gen.dy;   var timefun = function () {     window.getSelection().removeAllRanges();     if (gen.L < 100)       gen.L = 100;     else if (gen.L > 200)       gen.L = 200;     if (gen.T < 125)       gen.T = 125;     else if (gen.T > 175)       gen.T = 175;     setLT(movebox, gen.L, gen.T);   };   setTimeout(timefun, 2); }; var fun2 = function () {   document.removeEventListener("mousemove", fun1, false);   document.removeEventListener("mouseuo", fun2, false); }; var gen = {   x: null,   y: null,   _x: null,   _y: null,   dx: null,   dy: null,   L: null,   T:null, }; var setLT = function (dom, L, T) {   dom.style.left = L + "px";   dom.style.top = T + "px"; };

css:

body {   position:absolute;   margin:0;   padding:0; } #center{   position:absolute;   top:200px;   left:300px;   width:400px;   height:400px;   background-color:#808080; } #black{   position:absolute;   width:400px;   height:400px;   z-index:80;   background-color:#000;   opacity:0.6; } #bigimg{   z-index:50;   position:absolute;   left:100px;   top:125px; } #movebox{   z-index:100;   position:absolute;   width:100px;   height:100px;   left:150px;   top:150px;   overflow:hidden;   cursor:move;   background-color:#ff6a00; } #moveimg{   position:absolute;   left:-50px;   top:-25px; }

以上就是本文的全部内容，希望对大家的学习有所帮助。

上一篇：JavaScript头像上传插件源码分享

下一篇：javascript中不易分清的slice,splice和split三个函数