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>