<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
var mouseX, mouseY;
var objX, objY;
var isDowm = false; //是否按下鼠标
function mouseDown(obj, e) {
// obj.style.cursor = "pointer";
objX = obj.style.left; //记录原始的left偏移
objY = obj.style.top;
mouseX = e.clientX; //记录按下鼠标的x
mouseY = e.clientY;
isDowm = true;
}
function mouseMove(obj,e) {
// var div = document.getElementById(obj);
var x = e.clientX;
var y = e.clientY;
if (isDowm) {
obj.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px";//div距离左侧的偏移=原始的left+现在鼠标的x-鼠标按下时的x
// console.log("objx"+objX) ;
// console.log("x"+x) ;
// console.log("mousex"+mouseX) ;
obj.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) + "px";
}
}
function mouseUp(obj,e) {
if (isDowm) {
var x = e.clientX;
var y = e.clientY;
// var div = document.getElementById(obj);
obj.style.left = (parseInt(x) + parseInt(objX)- parseInt(mouseX)) + "px";
console.log("objx"+objX) ;
console.log("x"+x) ;
console.log("mousex"+mouseX) ;
obj.style.top = (parseInt(y) + parseInt(objY)- parseInt(mouseY)) + "px"; mouseX = x;
rewmouseY = y;
// obj.style.cursor = "pointer";
isDowm = false;
}
}
</script>
</head>
<body>
<div id="div1" style="background-color: Green; border: 1px solid red; height: 300px; top: 100px; left: 100px; width: 300px; position: absolute; cursor:pointer" οnmοusedοwn="mouseDown(this,event)" οnmοusemοve="mouseMove(this,event)" οnmοuseup="mouseUp(this,event)">
</div>
</body>
</html>
1199
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
