标签：style blog http io ar color os sp java
上篇讲的是原生js实现拖拽的效果，本篇是jquery实现拖拽的效果。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="utf-8"/> <title> New Document </title> <script type="text/javascript" src="../js/jquery.js"></script> <style type="text/css"> /*模块拖拽*/ .drag{position:absolute;width:100px;height:100px;border:1px solid #ddd;background:#FBF2BD;text-align:center;padding:5px;top:100px;left:20px;cursor:move;} </style> <script type="text/javascript"> // 模块拖拽 $(function(){ var _move=false;//移动标记 var _x,_y;//鼠标离控件左上角的相对位置 $(".drag").click(function(){ //alert("click");//点击（松开后触发） }).mousedown(function(e){ _move=true; _x=e.pageX-parseInt($(".drag").css("left")); _y=e.pageY-parseInt($(".drag").css("top")); $(".drag").fadeTo(20, 0.5);//点击后开始拖动并透明显示 }); $(document).mousemove(function(e){ if(_move){ var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置 var y=e.pageY-_y; $(".drag").css({top:y,left:x});//控件新位置 } }).mouseup(function(){ _move=false; $(".drag").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明 }); }); </script> </head> <body> <!--模块拖拽--> <div class="drag">这个可以拖动哦 ^_^</div> </body> </html>
标签：style blog http io ar color os sp java
原文地址：http://www.cnblogs.com/jiaojiaome/p/4137831.html
