标签归档:元素拖动

做了个元素拖动实验

iframe框引用demo:

原始demo地址:demo.luojia.me/moveelement/

代码:

<style>
body{ margin:0px; }
</style>
<script src="jquery.js">
</script>
<div id="1" style="position:fixed; border:1px solid #000;height:200px;width:400px; text-align:center; line-height:200px;background-color:#69F;cursor:move">
点着拖我
</div>
<script>
clickpointx  =  0;
clickpointy  =  0;
divx  =   (window.innerWidth  -  400)  /  2;
divy  =   (window.innerHeight  -  200)  /  2;
$("#1").css("left",  divx);
$("#1").css("top",  divy);
$("#1").mousedown(function(event)  {
	$(document).unbind("mouseup");
	$(document).unbind("mousemove");
	$("#1").unbind("animate");
	event.preventDefault();
	var clickpointx  =  event.pageX;
	var clickpointy  =  event.pageY;
	$(document).mouseup(function(event)  {
		$(document).unbind("mouseup");
		$(document).unbind("mousemove");
		$("#1").animate({
			top:  divy
		},
		500);
		$("#1").animate({
			left:  divx
		},
		500);
	});
	$(document).mousemove(function(event)  {
		event.preventDefault();
		var pointx  =  event.pageX  -  clickpointx;
		var pointy  =  event.pageY  -  clickpointy;
		$("#1").css("left",  pointx  +  divx);
		$("#1").css("top",  pointy  +  divy);
	});
});
</script>