您好,登錄后才能下訂單哦!
這期內容當中小編將會給大家帶來有關使用jQuery怎么實現一個對話框拖動功能,文章內容豐富且以專業的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
具體如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>www.jb51.net 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" > <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>
上述就是小編為大家分享的使用jQuery怎么實現一個對話框拖動功能了,如果剛好有類似的疑惑,不妨參照上述分析進行理解。如果想知道更多相關知識,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。