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>