自己封裝的一個(gè)原生JS拖動(dòng)方法(推薦)
代碼:
function drag(t,p){ var point = p || null, target = t || null, resultX = 0, resultY = 0; (!point)? point = target : ''; //如果沒有拖動(dòng)點(diǎn),則拖動(dòng)點(diǎn)默認(rèn)為整個(gè)別拖動(dòng)元素 function getPos(t){ var offsetLeft = 0, offsetTop = 0, offsetParent = t; while(offsetParent){ offsetLeft+=offsetParent.offsetLeft; offsetTop+=offsetParent.offsetTop; offsetParent = offsetParent.offsetParent; } return {'top':offsetTop,'left':offsetLeft}; } function core(){ var width = document.body.clientWidth || document.documentElement.clientWidth, height = document.body.clientHeight || document.documentElement.clientHeight; maxWidth = width - target.offsetWidth, maxHeight = height - target.offsetHeight; (resultX >= maxWidth)? target.style.left = maxWidth+'px' : (resultX > 0)?target.style.left = resultX +'px': ''; //重置默認(rèn)位置。 (resultY >= maxHeight)? target.style.top = maxHeight +'px' : (resultY > 0)?target.style.top = resultY +'px':''; //重置默認(rèn)位置。 point.onmousedown=function(e){ var e = e || window.event, coordX = e.clientX, coordY = e.clientY, posX = getPos(target).left, posY = getPos(target).top; point.setCapture && point.setCapture(); //將Mouse事件鎖定到指定元素上。 document.onmousemove=function(e){ var ev = e || window.event, moveX = ev.clientX, moveY = ev.clientY; resultX = moveX - (coordX - posX); //結(jié)果值是坐標(biāo)點(diǎn)減去被拖動(dòng)元素距離瀏覽器左側(cè)的邊距 resultY = moveY - (coordY - posY); (resultX > 0 )?((resultX < maxWidth)?target.style.left = resultX+'px' : target.style.left = maxWidth+'px') : target.style.left = '0px'; (resultY > 0 )?((resultY < maxHeight)?target.style.top = resultY+'px' : target.style.top = maxHeight+'px') : target.style.top = '0px'; ev.stopPropagation && ev.stopPropagation(); ev.preventDefault; ev.returnValue = false; ev.cancelBubble = true; }; }; document.onmouseup=function(){ // 解決拖動(dòng)時(shí),當(dāng)鼠標(biāo)指向的DOM對象非拖動(dòng)點(diǎn)元素時(shí),無法觸發(fā)拖動(dòng)點(diǎn)的onmousedown的BUG。 document.onmousemove = null; point.releaseCapture && point.releaseCapture(); // 將Mouse事件從指定元素上移除。 }; point.onmouseup=function(e){ var e = e || window.event; document.onmousemove = null; point.releaseCapture && point.releaseCapture(); }; } core(); window.onresize = core; }
使用方式:
drag(t,p) /* * 說明 * t 表示被拖動(dòng)的元素 * p 表示拖動(dòng)點(diǎn) */ // 注意:如果省略拖動(dòng)點(diǎn),默認(rèn)可拖動(dòng)的區(qū)域是整個(gè)被拖動(dòng)元素
以上就是小編為大家?guī)淼淖约悍庋b的一個(gè)原生JS拖動(dòng)方法(推薦)全部內(nèi)容了,希望大家多多支持腳本之家~
- 基于JS組件實(shí)現(xiàn)拖動(dòng)滑塊驗(yàn)證功能(代碼分享)
- Android通過自定義ImageView控件實(shí)現(xiàn)圖片的縮放和拖動(dòng)的實(shí)現(xiàn)代碼
- Android 仿淘寶、京東商品詳情頁向上拖動(dòng)查看圖文詳情控件DEMO詳解
- Android RecyclerView滑動(dòng)刪除和拖動(dòng)排序
- jquery實(shí)現(xiàn)拖動(dòng)效果(代碼分享)
- 原生js實(shí)現(xiàn)可拖動(dòng)的登錄框效果
- 基于css3新屬性transform及原生js實(shí)現(xiàn)鼠標(biāo)拖動(dòng)3d立方體旋轉(zhuǎn)
- js實(shí)現(xiàn)div在頁面拖動(dòng)效果
- javascript html5 canvas實(shí)現(xiàn)可拖動(dòng)省份的中國地圖
- 拖動(dòng)時(shí)防止選中
相關(guān)文章
JavaScript原型繼承_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了JavaScript原型繼承的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06微信小程序自定義組件的實(shí)現(xiàn)方法及自定義組件與頁面間的數(shù)據(jù)傳遞問題
這篇文章主要介紹了微信小程序自定義組件的實(shí)現(xiàn)方法及自定義組件與頁面間的數(shù)據(jù)傳遞 ,需要的朋友可以參考下2018-10-10Javascript節(jié)點(diǎn)關(guān)系實(shí)例分析
這篇文章主要介紹了Javascript節(jié)點(diǎn)關(guān)系,實(shí)例分析了javascript操作父子節(jié)點(diǎn)及兄弟節(jié)點(diǎn)的相關(guān)技巧,需要的朋友可以參考下2015-05-05javascript實(shí)時(shí)顯示當(dāng)天日期的方法
這篇文章主要介紹了javascript實(shí)時(shí)顯示當(dāng)天日期的方法,可實(shí)時(shí)顯示當(dāng)前日期及星期的功能,非常簡單實(shí)用,需要的朋友可以參考下2015-05-05Bootstrap模態(tài)框(Modal)實(shí)現(xiàn)過渡效果
這篇文章主要為大家詳細(xì)介紹了Bootstrap模態(tài)框(Modal)實(shí)現(xiàn)過渡效果的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03Javascript 網(wǎng)頁黑白效果實(shí)現(xiàn)代碼(兼容IE/FF等)
今天在網(wǎng)上看到有人推薦的一個(gè)不錯(cuò)的方法,試了一下,效果還是可以的,可以自定義讓網(wǎng)頁的某一部分變成灰度顏色(黑白)。2010-04-04