js實現(xiàn)的簡練高效拖拽功能示例
更新時間：2016年12月21日 10:35:26 作者：hcjavascript
這篇文章主要介紹了js實現(xiàn)的簡練高效拖拽功能,通過對js鼠標事件的擴展實現(xiàn)拖拽效果,非常簡單實用,需要的朋友可以參考下
本文實例講述了js實現(xiàn)的簡練高效拖拽功能。分享給大家供大家參考，具體如下：
運行效果圖如下：
具體代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" charset="utf-8" />
<meta http-equiv="content-type" content="text/html" />
<title>demo</title>
</head>
<body>
<p>aaaaaaaaaaa</p>
<div id="one" style="height:100px;width:100px;background:red;position:absolute;"></div>
<script>
var odiv=document.getElementById("one");
dra(odiv);
function dra(obj){
obj.onmousedown=function(e){
var oe=e||window.event;
var $this=this;
var l=oe.clientX-$this.offsetLeft;
var t=oe.clientY-$this.offsetTop;
document.onmousemove=function(e){
var oe=e||window.event;
var ol=oe.clientX-l;
var ot=oe.clientY-t;
if(ol<0) ol=0;
if(ot<0) ot=0;
if(ot>document.documentElement.clientHeight-$this.offsetHeight) ot=document.documentElement.clientHeight-$this.offsetHeight;
if(ol>document.documentElement.clientWidth-$this.offsetWidth) ol=document.documentElement.clientWidth-$this.offsetWidth;
$this.style.left=ol+"px";
$this.style.top=ot+"px";
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
if($this.releaseCapture) $this.releaseCapture();
}
if($this.setCapture){
$this.setCapture();
}
if(oe.preventDefault) oe.preventDefault();
else oe.returnValue=false;
return false;
}
}
</script>
</body>
</html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設計有所幫助。
相關(guān)文章
對于一些電商平臺來說，當商品被轉(zhuǎn)發(fā)后會很影響客戶查看其它產(chǎn)品和首頁，這時候就需要使用自定義導航欄自己寫一個“膠囊按鈕”。這篇文章主要介紹了詳見微信小程序膠囊按鈕返回|首頁自定義導航欄,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了js中l(wèi)et和var定義變量的區(qū)別,非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-02-02
這篇文章主要為大家詳細介紹了Web js實現(xiàn)復制文本到粘貼板，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了javascript閉包(Closure)用法,結(jié)合實例形式較為詳細的分析了JavaScript閉包的概念、功能及使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
下面小編就為大家?guī)硪黄獪\談JS中json數(shù)據(jù)的處理。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了js實現(xiàn)一個鏈接打開兩個鏈接地址的方法,可實現(xiàn)連續(xù)打開兩個鏈接的功能,非常簡單實用的技巧,需要的朋友可以參考下2015-05-05
js中requestAnimationFrame()解讀與使用示例
requestAnimationFrame()是JavaScript中用于創(chuàng)建高效、流暢動畫的核心方法,它與瀏覽器的重繪過程同步,確保每次動畫更新都與顯示器刷新率同步,下面就來一起了解一下2024-09-09
詳解用webpack的CommonsChunkPlugin提取公共代碼的3種方式
本篇文章主要介紹了詳解用webpack的CommonsChunkPlugin提取公共代碼的3種方式，具有一定的參考價值，有興趣的可以了解一下2017-11-11
這篇文章主要為大家詳細介紹了js實現(xiàn)圖片緩慢放大縮小效果的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)特效留言框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08