iframe框引用demo：
原始demo地址:http://www.luojia.tk/shiyanshi.php?id=moveelement
代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <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> |
