代码效果-鼠标点击DIV，可以任意拖拽DIV
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>drag</title>
<script src="../../../tomcat7/webapps/html/jquery-1.8.3.min.js"></script>
<script>
$(function(){
$("#move").mousedown(function(e){
drag(document.getElementById("move"),e)
});
});
function drag(elementToDrag, event) {
var startX = event.clientX,
startY = event.clientY;
var origX = elementToDrag.offsetLeft,
origY = elementToDrag.offsetTop;
var deltaX = startX - origX,
deltaY = startY - origY;
if (document.addEventListener) {
document.addEventListener("mousemove", moveHandler, true);
document.addEventListener("mouseup", upHandler, true);
} else {
elementToDrag.setCapture();
elementToDrag.attachEvent("onmousemove", moveHandler);
elementToDrag.attachEvent("onmouseup", upHandler);
elementToDrag.attachEvent("onlosecapture", upHandler);
}
if (event.stopPropagation)
event.stopPropagation();
else
event.cancelBubble = true;
if (event.preventDefault)
event.preventDefault();
else
event.returnValue = false;
//鼠标移动时触发此函数
function moveHandler(e) {
if (!e)
e = window.event;
elementToDrag.style.left = (e.clientX - deltaX) + "px";
elementToDrag.style.top = (e.clientY - deltaY) + "px";
elementToDrag.style.zIndex = "10";
if (e.stopPropagation)
e.stopPropagation();
else
e.cancelBubble = true;
}
//鼠标Up时触发
function upHandler(e) {
//alert("up");
if (!e)
e = window.event;
elementToDrag.style.zIndex = "1";
if (document.removeEventListener) {
document.removeEventListener("mouseup", upHandler, true);
document.removeEventListener("mousemove", moveHandler, true);
} else {
elementToDrag.detachEvent("onlosecapture", upHandler);
elementToDrag.detachEvent("onmouseup", upHandler);
elementToDrag.detachEvent("onmousemove", moveHandler);
elementToDrag.releaseCapture();
}
if (e.stopPropagation)
e.stopPropagation();
else
e.cancelBubble = true;
}
}
</script>
</head>
<body>
<div id="move" style=" position:absolute; z-index:100px; background:#F96; height:200px; width:200px;">drag</div>
</body>
</html>
570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
