jQuery实现鼠标拖拽div

发布时间:2014-10-23 23:23:48
来源:分享查询网

由于页面中许多div是通过数据库读取出来的,在id方面不好操作,于是想到了可以另外添加一个class名,用jQuery实现了div框的移动,即鼠标拖拽: div如下:添加的class为layer <div style="z-index: 3; top: 80px; left: 160px" id="Layer3" class="Face6 layer" ondblclick="Show(1)"> <p class="Num"> 编号:3 <img onclick="Close(3)" alt="关闭" src="../images/close.gif"></p> <p class="Detail"> <img alt="头像" src="flowers/icon2.gif" align="middle"><span class="Head">小主</span><br> 小主,你要照顾好自己,一切安好哦</p> <p class="Sign" align="right"> testtest</p> </div> jQuery代码如下: <script type="text/javascript"> jQuery(document).ready( function () { $('.layer').mousedown( function (event) { var isMove = true; var abs_x = event.pageX - $('.layer').offset().left; var abs_y = event.pageY - $('.layer').offset().top; $(document).mousemove(function (event) { if (isMove) { var obj = $('.layer'); obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y}); } } ).mouseup( function () { isMove = false; } ); } ); } ); </script>

返回顶部
查看电脑版