本文實例講述了jQuery實現的簡單對話框拖動功能。分享給大家供大家參考，具體如下：
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>m.survivalescaperooms.com jquery 拖動</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel=" rel="external nofollow" stylesheet"><style> *{margin: 0;padding: 0;box-sizing: border-box;-moz-user-select:none;} body {font: 12px/16px bold 'microsoft yahei,微軟雅黑';} .dragContainer { width: 382px; height: 395px; position: absolute; top: 50%; left: 50%; border: 1px solid red; margin-left: -191px; margin-top: -197.5px; } .dragContainer .dragtitle { width: 100%; height: 35px; border-bottom: 1px solid red; text-align: center; line-height: 35px; } .dragContainer .dragtitle:hover { cursor: move; } .dragContainer .content { width: 100%; height: 360px; } p.buttonGroup { width: 100%; text-align: center; position: absolute; bottom: 0; left: 0; right: 0; padding: 5px; border-top: 1px solid red; } p.buttonGroup input { padding: 5px 10px; color: white; } p.buttonGroup input:hover { cursor: pointer; cursor: hand; } p.buttonGroup input:first-child { margin-left: 25px; background: blue; } p.buttonGroup input.btn2 { margin-left: 15px; background: red; } </style></head><body> <div class="dragContainer" id="drag" style="'position:absolute;" > <p class="dragtitle">標題欄</p> <div class="content"></div> <p class="buttonGroup"><input type="button" value="確定"><input type="button" value="取消" class="btn2"></p> </div> <script src="http://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script> <script type="text/javascript"> var mydrag={ mousePoint: {x:0,y:0}, //初始化坐標 drag: function(){ var that=this; //保存當前對象即(mydrag)，如果不保存，在mousedown()里訪問不了mydrag這個對象 var targetid=$(".dragtitle"); targetid.mousedown(function(event){ var e=event; var offsetLeft=targetid.offset().left; //當前div的左偏移距離 var offsetTop=targetid.offset().top; //當前div的頂部偏移距離 that.mousePoint.x=e.clientX-offsetLeft;//計算鼠標點擊時離它自己div的橫向距離 that.mousePoint.y=e.clientY-offsetTop; //計算鼠標點擊時離它自己div的縱向距離 $(document).bind('mousemove',move); e.stopPropagation(); }); function move(event){ var e =event; var Left=e.clientX-that.mousePoint.x; //移動后，重新計算左偏移和頂部偏移距離 var Top=e.clientY-that.mousePoint.y; $("#drag").css({'top':Top,'left':Left,'margin':0}); $(document).bind('mouseup',end); e.stopPropagation(); }; function end(event){ var e = event; $(document).unbind('mousemove', move); $(document).unbind('mouseup',end); e.stopPropagation(); }; } } mydrag.drag(); </script></body></html>使用在線HTML/CSS/JavaScript代碼運行工具 http://tools.VeVB.COm/code/HtmlJsRun測試，運行效果如下：
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery拖拽特效與技巧總結》、《jQuery常用插件及用法總結》、《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
