自己封裝的一個(gè)原生JS拖動(dòng)方法(推薦)
更新時(shí)間:2016年11月22日 10:07:56 投稿:jingxian
下面小編就為大家?guī)硪黄约悍庋b的一個(gè)原生JS拖動(dòng)方法(推薦)。小編覺得挺不錯(cuò)的,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧,祝大家游戲愉快哦
代碼:
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對(duì)象非拖動(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)方法(推薦)全部?jī)?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)文章
layui實(shí)現(xiàn)數(shù)據(jù)表格隱藏列的示例
今天小編就為大家分享一篇layui實(shí)現(xiàn)數(shù)據(jù)表格隱藏列的示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
JavaScript簡(jiǎn)單獲取系統(tǒng)當(dāng)前時(shí)間完整示例
這篇文章主要介紹了JavaScript簡(jiǎn)單獲取系統(tǒng)當(dāng)前時(shí)間的方法,涉及javascript針對(duì)日期與時(shí)間的判斷以及字符串組合的相關(guān)技巧,需要的朋友可以參考下2016-08-08
taro 實(shí)現(xiàn)購物車邏輯的實(shí)例代碼
這篇文章主要介紹了taro 實(shí)現(xiàn)購物車邏輯,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
js實(shí)現(xiàn)黑色簡(jiǎn)易的滑動(dòng)門網(wǎng)頁tab選項(xiàng)卡效果
這篇文章主要介紹了js實(shí)現(xiàn)黑色簡(jiǎn)易的滑動(dòng)門網(wǎng)頁tab選項(xiàng)卡效果,可實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)滑過tab項(xiàng)切換對(duì)應(yīng)菜單的功能,涉及javascript鼠標(biāo)事件控制頁面元素的遍歷與樣式改變實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
一行代碼實(shí)現(xiàn)純數(shù)據(jù)json對(duì)象的深度克隆實(shí)現(xiàn)思路
今天整理了下資料,分析下為什么一句話可以實(shí)現(xiàn)純數(shù)據(jù)json對(duì)象的深度克隆,感興趣的朋友可以了解下哦2013-01-01

