這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)使用jQuery怎么實現(xiàn)一個對話框拖動功能,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
創(chuàng)新互聯(lián)專注于古雷港企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城開發(fā)。古雷港網(wǎng)站建設(shè)公司,為古雷港等地區(qū)提供建站服務(wù)。全流程按需開發(fā),專業(yè)設(shè)計,全程項目跟蹤,創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)具體如下:
<!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">標(biāo)題欄</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}, //初始化坐標(biāo) drag: function(){ var that=this; //保存當(dāng)前對象即(mydrag),如果不保存,在mousedown()里訪問不了mydrag這個對象 var targetid=$(".dragtitle"); targetid.mousedown(function(event){ var e=event; var offsetLeft=targetid.offset().left; //當(dāng)前div的左偏移距離 var offsetTop=targetid.offset().top; //當(dāng)前div的頂部偏移距離 that.mousePoint.x=e.clientX-offsetLeft;//計算鼠標(biāo)點擊時離它自己div的橫向距離 that.mousePoint.y=e.clientY-offsetTop; //計算鼠標(biāo)點擊時離它自己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怎么實現(xiàn)一個對話框拖動功能了,如果剛好有類似的疑惑,不妨參照上述分析進行理解。如果想知道更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
名稱欄目:使用jQuery怎么實現(xiàn)一個對話框拖動功能-創(chuàng)新互聯(lián)
標(biāo)題鏈接:http://muchs.cn/article20/dhesco.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、網(wǎng)站排名、品牌網(wǎng)站設(shè)計、品牌網(wǎng)站制作、網(wǎng)站維護
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容