JavaScript 拖拽實(shí)例代碼
一、JS 拖拽的實(shí)現(xiàn)實(shí)例代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>拖拽js</title> <style type="text/css"> html, body { overflow:hidden; } body, div, { margin:0; padding:0; } body { color:#fff; font:12px/2 Arial; } p { padding:0 10px; margin-top:10px; } span { color:#ff0; padding-left:5px; } #box { position:absolute; width:300px; height:150px; background:#D5CDDA; border:2px solid #ccc; top:150px; left:400px; margin:0; } #drag { height:25px; cursor:move; background:#724a88; border-bottom:2px solid #ccc; padding:0 10px; } </style> </head> <body> <div id="box"> <div id="drag">拖動(dòng)區(qū)域</div> 被拖動(dòng)的整個(gè)div </div> </body> </html> <script src="js/jquery-1.10.1.min.js"></script> <script type="text/javascript"> $(function(){ moveBox($("#box"),$("#drag")) ; }) //B被拖動(dòng)的div,BT可拖動(dòng)區(qū)域 function moveBox(B,BT){ var bDrag = false; var _x,_y; BT.mousedown(function(event){ var e=event || window.event; bDrag = true; _x=e.pageX-B.position().left; _y=e.pageY-B.position().top; return false }) $(document).mousemove(function(event){ if(!bDrag) return false; var e=event || window.event; var x=e.pageX-_x; var y=e.pageY-_y; console.log(B.position()); var maxL = $(document).width() - B.outerWidth(); var maxT = $(document).height() - B.outerHeight(); x = x < 0 ? 0: x; x = x > maxL ? maxL: x; y = y < 0 ? 0: y; y = y > maxT ? maxT: y; B.css({left:x,top:y}); return false }).mouseup(function(){ bDrag = false; return false }) } </script>
二、 js之拖拽效果
主要原理:
1、當(dāng)鼠標(biāo)按下時(shí),記錄鼠標(biāo)坐標(biāo),用到的是 onmousedown;
2、當(dāng)鼠標(biāo)移動(dòng)時(shí),計(jì)算鼠標(biāo)移動(dòng)的坐標(biāo)之差,用到的是 onmousemove;
3、當(dāng)鼠標(biāo)松開時(shí),清除事件,用到的是 onmouseup;
了解的知識(shí):
1、div 的 offsetLeft 與 style.left 的區(qū)別:http://www.dbjr.com.cn/article/93142.htm
效果圖如下:
突然發(fā)現(xiàn)有沒有效果圖都一樣哈哈,不說廢話了,上代碼:
html代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>js拖拽效果</title> <style type="text/css"> #div1 { width : 200px; height: 200px; position: absolute; background: #99dd33; cursor: move; } </style> </head> <body> <div id="div1"></div> </body> <script type="text/javascript"> // js代碼 </script> </html>
js代碼:
window.onload function() { var disX = disY = 0; // 鼠標(biāo)距離div的左距離和上距離 var div1 = document.getElementById("div1"); // 得到div1對象 // 鼠標(biāo)按下div1時(shí) div1.onmousedown = function(e) { var evnt = e || event; // 得到鼠標(biāo)事件 disX = evnt.clientX - div1.offsetLeft; // 鼠標(biāo)橫坐標(biāo) - div1的left disY = evnt.clientY - div1.offsetTop; // 鼠標(biāo)縱坐標(biāo) - div1的top // 鼠標(biāo)移動(dòng)時(shí) document.onmousemove = function(e) { var evnt = e || event; var x = evnt.clientX - disX; var y = evnt.clientY - disY; var window_width = document.documentElement.clientWidth - div1.offsetWidth; var window_height = document.documentElement.clientHeight - div1.offsetHeight; x = ( x < 0 ) ? 0 : x; // 當(dāng)div1到窗口最左邊時(shí) x = ( x > window_width ) ? window_width : x; // 當(dāng)div1到窗口最右邊時(shí) y = ( y < 0 ) ? 0 : y; // 當(dāng)div1到窗口最上邊時(shí) y = ( y > window_height ) ? window_height : y; // 當(dāng)div1到窗口最下邊時(shí) div1.style.left = x + "px"; div1.style.top = y + "px"; }; // 鼠標(biāo)抬起時(shí) document.onmouseup = function() { document.onmousemove =null; document.onmouup = null; }; return false; }; };
當(dāng)然,這個(gè)雖然支持大部分瀏覽器,但是,我覺得div跟隨鼠標(biāo)的速度有點(diǎn)滯后,如果有好的解決辦法請聯(lián)系我喔,謝謝!
以上就是js實(shí)現(xiàn)拖拽的實(shí)例代碼,有需要的小伙伴可以參考下,謝謝大家對本站的支持!
- JS HTML5拖拽上傳圖片預(yù)覽
- JS HTML5實(shí)現(xiàn)拖拽移動(dòng)列表效果
- 原生js實(shí)現(xiàn)自由拖拽彈窗代碼demo
- 再次談?wù)揜eact.js實(shí)現(xiàn)原生js拖拽效果引起的一系列問題
- 基于React.js實(shí)現(xiàn)原生js拖拽效果引發(fā)的思考
- javascript實(shí)現(xiàn)PC網(wǎng)頁里的拖拽效果
- javascript實(shí)現(xiàn)移動(dòng)端上的觸屏拖拽功能
- jquery插件jquery.dragscale.js實(shí)現(xiàn)拖拽改變元素大小的方法(附demo源碼下載)
相關(guān)文章
代碼實(shí)例ajax實(shí)現(xiàn)點(diǎn)擊加載更多數(shù)據(jù)圖片
在本篇文章里我們給大家分享了關(guān)于ajax實(shí)現(xiàn)點(diǎn)擊加載更多數(shù)據(jù)圖片的相關(guān)代碼知識(shí)點(diǎn),有興趣的朋友們參考下。2018-10-10Clipboard.js 無需Flash的JavaScript復(fù)制粘貼庫
這篇文章主要介紹了JavaScript 內(nèi)容復(fù)制(無需flash) Clipboard.js使用方法,需要的朋友可以參考下2015-10-10javascript while語句和do while語句的區(qū)別分析
這篇文章通過實(shí)例代碼較詳細(xì)的給大家介紹了javascript while語句和do while語句的區(qū)別,感興趣的朋友一起看看吧2007-12-12詳解原生JavaScript實(shí)現(xiàn)jQuery中AJAX處理的方法
這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)jQuery中AJAX處理的方法,作者根據(jù)jQuery中一些對AJAX請求的處理方式來用原生API實(shí)現(xiàn),需要的朋友可以參考下2016-05-05jQuery.extend()的實(shí)現(xiàn)方式詳解及實(shí)例
extend()函數(shù)是jQuery的基礎(chǔ)函數(shù)之一,作用是擴(kuò)展現(xiàn)有的對象2013-06-06Javascript實(shí)現(xiàn)表單檢驗(yàn)
這篇文章主要介紹了Javascript實(shí)現(xiàn)表單檢驗(yàn),以注冊界面為例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06