分享一個(gè)原生的JavaScript拖動(dòng)方法
更新時(shí)間:2016年09月25日 10:18:18 作者:卷柏的花期
本文給大家分享的是基于JavaScript的setCapture方法實(shí)現(xiàn)的拖動(dòng)效果,非常的簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下
代碼:
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í),無(wú)法觸發(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) /* * 說(shuō)明 * t 表示被拖動(dòng)的元素 * p 表示拖動(dòng)點(diǎn) */ // 注意:如果省略拖動(dòng)點(diǎn),默認(rèn)可拖動(dòng)的區(qū)域是整個(gè)被拖動(dòng)元素
您可能感興趣的文章:
相關(guān)文章
js實(shí)現(xiàn)文字無(wú)縫向上滾動(dòng)
本文主要分享了js實(shí)現(xiàn)文字無(wú)縫向上滾動(dòng)的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02js左側(cè)三級(jí)菜單導(dǎo)航實(shí)例代碼
在左側(cè)三級(jí)菜單導(dǎo)航想必大家都見到過吧,它的實(shí)現(xiàn)過程也并不復(fù)雜,下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以了解下2013-09-09Auntion-TableSort國(guó)人寫的一個(gè)javascript表格排序的東西
Auntion-TableSort國(guó)人寫的一個(gè)javascript表格排序的東西...2007-11-11如何讓動(dòng)態(tài)插入的javascript腳本代碼跑起來(lái)。
如何讓動(dòng)態(tài)插入的javascript腳本代碼跑起來(lái)。...2007-01-01javascript調(diào)試過程中找不到哪里出錯(cuò)的可能原因
本文為大家講解下在寫javascript時(shí)找不到哪里出錯(cuò)的可能原因,遇到的朋友可以參考下2013-12-12概述javascript在Google IE中的調(diào)試技巧
本篇文章主要是對(duì)javascript在Google IE中的調(diào)試技巧進(jìn)行了介紹,需要的朋友可以過來(lái)參考下2016-11-11