限制范围拖拽，磁性吸附。-js教程-PHP中文网

限制范围拖拽，磁性吸附。

巴扎黑

发布： 2017-06-23 11:04:16

原创

1238 人浏览过

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0;
}
#wrap {
margin: 50px auto;
position: relative;
border: 1px solid #000;
width: 600px;
height: 500px;
} 
#div {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: red;
cursor: move;
}
</style>
</head>
<body>
<div id="wrap">
<div id="div">文字</div>
</div>
<script type="text/javascript">
(function(){
var div = document.querySelector(&#39;#div&#39;);
var maxX = div.offsetParent.clientWidth - div.offsetWidth;
var maxY = div.offsetParent.clientHeight - div.offsetHeight;
div.addEventListener(&#39;mousedown&#39;, function(e) {
e.preventDefault();
var start = {x: e.clientX,y: e.clientY};
var elOffset = {x: div.offsetLeft,y: div.offsetTop};
document.addEventListener(&#39;mousemove&#39;, move);
document.addEventListener(&#39;mouseup&#39;, end);
function move(e){
var dis  = {x:e.clientX - start.x,y:e.clientY - start.y};
var x = dis.x + elOffset.x;
var y = dis.y + elOffset.y;
/* 左侧磁性吸附 */
x = x<0?0:(x>maxX?maxX:x);

y = y<0?0:(y>maxY?maxY:y);
console.log(x);
div.style.left = x + "px";
div.style.top = y + "px";
}
function end(e){
document.removeEventListener(&#39;mousemove&#39;, move);
document.removeEventListener(&#39;mouseup&#39;, end);
var dis  = {x:e.clientX - start.x,y:e.clientY - start.y};
var x = dis.x + elOffset.x;
var y = dis.y + elOffset.y;
/* 左侧磁性吸附 */
x = x<100?0:(x>maxX?maxX:x);
/* 上边磁性吸附 */
y = y<100?0:(y>maxY?maxY:y);
console.log(x);
div.style.left = x + "px";
div.style.top = y + "px";
}
});
})(); 
</script>
</body>
</html>

登录后复制

以上是限制范围拖拽，磁性吸附。的详细内容。更多信息请关注PHP中文网其他相关文章！