拖拽原理
a, 被拖拽物体绝对定位
b, 按下时记录鼠标在拖拽物体上的位置，拖拽时鼠标在拖拽物体上的位置保持不变
c, 鼠标移动时改变拖拽物体位置
1，简易拖拽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖拽原型</title>
<script type="text/javascript" src="js/EventUtil.js"></script>
<style type="text/css">
div,body{
margin: 0px;
padding: 0px;
}
#div1{
position: absolute;
width: 150px;
height: 150px;
background-color: #ff0;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
<script type="text/javascript">
var dragDiv = document.getElementById("div1");
EventUtil.addHandler(window, "load", function(){
var disX = 0; //鼠标的x方向距拖拽左边框长度
var disY = 0; //鼠标的y方向距拖拽上边框长度
var moveHandler = function(event){
var evt = event || window.event;
dragDiv.style.left = evt.clientX - disX + "px";
dragDiv.style.top = evt.clientY - disY + "px";
document.title = "clientX:" + evt.clientX + ";clientY:" + evt.clientY;
};
var mouseupHandler = function(){
EventUtil.removeHandler(document, "mousemove", moveHandler);
EventUtil.removeHandler(document, "mouseup", mouseupHandler);
};
EventUtil.addHandler(dragDiv, "mousedown", function(event){
var evt = event || window.event;
//鼠标按下记录鼠标在拖拽物体上的位置
disX = evt.clientX - dragDiv.offsetLeft;
disY = evt.clientY - dragDiv.offsetTop;
EventUtil.addHandler(document, "mousemove", moveHandler);
EventUtil.addHandler(document, "mouseup", mouseupHandler);
});
});
</script>
</html>
2，边界限制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖拽原型</title>
<script type="text/javascript" src="js/EventUtil.js"></script>
<style type="text/css">
div,body{
margin: 0px;
padding: 0px;
}
#div1{
position: absolute;
width: 150px;
height: 150px;
background-color: #ff0;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
<script type="text/javascript">
var dragDiv = document.getElementById("div1");
EventUtil.addHandler(window, "load", function(){
var disX = 0; //鼠标的x方向距拖拽左边框长度
var disY = 0; //鼠标的y方向距拖拽上边框长度
var moveHandler = function(event){
var evt = event || window.event;
var leftDis = evt.clientX - disX ;
//左边临界判断
leftDis = leftDis < 0 ? 0 : leftDis;
//右边临界判断
var maxLeft = document.documentElement.clientWidth - dragDiv.offsetWidth;
leftDis = leftDis > maxLeft ? maxLeft : leftDis;
var topDis = evt.clientY - disY;
//上边临界判断
topDis = topDis < 0 ? 0 : topDis;
//下边临界判断
var maxTop = document.documentElement.clientHeight - dragDiv.offsetHeight;
topDis = topDis > maxTop ? maxTop : topDis;
dragDiv.style.left = leftDis + "px";
dragDiv.style.top = topDis + "px";
document.title = "clientX:" + evt.clientX + ";clientY:" + evt.clientY;
};
var mouseupHandler = function(){
EventUtil.removeHandler(document, "mousemove", moveHandler);
EventUtil.removeHandler(document, "mouseup", mouseupHandler);
};
EventUtil.addHandler(dragDiv, "mousedown", function(event){
var evt = event || window.event;
//鼠标按下记录鼠标在拖拽物体上的位置
disX = evt.clientX - dragDiv.offsetLeft;
disY = evt.clientY - dragDiv.offsetTop;
EventUtil.addHandler(document, "mousemove", moveHandler);
EventUtil.addHandler(document, "mouseup", mouseupHandler);
});
});
</script>
</html>
时间： 2024-10-05 16:24:40