`

鼠标拖拽DIV效果

    博客分类：
  • UI
htmlUI 
阅读更多
代码效果-鼠标点击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>
分享到：
| css控制文本自动换行
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics