js解决movebox移动问题
更新时间：2016年03月29日 14:42:02 作者：月光为邻
这篇文章主要为大家详细介绍了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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关文章
JSON表单是一个基于React的抽象组件，它可以把JSON数据格式描述的表单转换成项目中的表单，这篇文章主要介绍了JSON生成Form表单的方法示例,感兴趣的小伙伴们可以参考一下2018-11-11
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
这篇文章主要为大家详细介绍了js实现ctrl+v粘贴上传图片，兼容chrome，firefox，ie11，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-03-03
这篇文章主要介绍了webpack打包多页面的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
D3.js支持从外部读取数据进行图形交互(Loading External Resources)，支持的格式有CSV、txt、Html、tsv、xml文本文件和JSON XML数据结构，下面这篇文章主要给大家介绍了D3.js中CSV表格文件读取的相关资料，需要的朋友可以参考下。2017-06-06
JavaScript defineProperty如何实现属性劫持
双向数据绑定的核心方法,主要是做数据劫持操作(监控数据变化),下面这篇文章主要给大家介绍了关于JavaScript defineProperty如何实现属性劫持的相关资料,需要的朋友可以参考下2021-07-07
这篇文章主要介绍了JS实现的透明度渐变动画效果,涉及javascript响应鼠标事件针对页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2018-04-04
本文主要介绍了原生js封装自定义滚动条的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
js获取下拉列表框<option>中的value和text的值示例代码
本篇文章主要是对js获取下拉列表框<option>中的value和text的值示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
下面小编就为大家分享一篇form表单数据封装成json格式并提交给服务器的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了Bootstrap实现圆角、圆形头像和响应式图片的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
最新评论