js解决movebox移动问题
本文为大家分享了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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助。
-
本文向大家介绍解决vue移动端适配问题，包括了解决vue移动端适配问题的使用技巧和注意事项，需要的朋友参考一下 1，先看看网上关于移动端适配讲解 再聊移动端页面适配，rem和vw适配方案！ 基础点：rem相对根节点字体的大小。所以不用px; 根字体：字体的大小px; px：你就当成cm(厘米)这样的东西吧； 基准：750设计稿； 这是方案的基础理论，在这个基础上，我们还要搞明白，到底要干一件什么事
-
本文向大家介绍JS解决移动web开发手机输入框弹出的问题，包括了JS解决移动web开发手机输入框弹出的问题的使用技巧和注意事项，需要的朋友参考一下 在移动web开发中和pc端不同的是，手机的输入是软键盘，这样就会有个问题，那就是当有输入的时候，键盘弹起来，整个页面难免会发生变化 1、页面提高背景会出现不够用的现象， 解决方法，在body中设置背景图，即便是页面抬升了，背景也依旧存在， 2、底部用f
-
本文向大家介绍原生js实现键盘控制div移动且解决停顿问题，包括了原生js实现键盘控制div移动且解决停顿问题的使用技巧和注意事项，需要的朋友参考一下 首先说明下为什么会停顿？ 效果 ：用键盘控制一个div移动 当按下一个方向键不放，div会先停顿一下，然后才开始持续移动。 原因：系统要区分用户是否连续输入，第一个到第二个之间有一个停顿时间 注：了解原因才能解决问题 效果展示 1.简单控制，但是有
-
本文向大家介绍vue项目中使用lib-flexible解决移动端适配的问题解决，包括了vue项目中使用lib-flexible解决移动端适配的问题解决的使用技巧和注意事项，需要的朋友参考一下 第一部分：项目中引入lib-flexible 一、项目中安装lib-flexible 二、在项目的入口js文件中引入lib-flexible 通过要以上两步，就完成了在vue项目使用lib-flexible来
-
本文向大家介绍js解决select下拉选不中问题，包括了js解决select下拉选不中问题的使用技巧和注意事项，需要的朋友参考一下 当事件mouseover中出现select下拉框时，select下拉是选不中的，解决办法： var o = e.relatedTarget || e.toElement;//判断下移动到的对象，移动到option上ie下是null，firefox等为undefined
-
本文向大家介绍移动端1px像素的问题及解决方案是什么？相关面试题，主要包含被问及移动端1px像素的问题及解决方案是什么？时的应答技巧和注意事项，需要的朋友参考一下 viewport结合rem解决像素比问题 比如在devicePixelRatio=2设置meta <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5,