快捷導航

js 鼠標拖動對象可讓任何div實現(xiàn)拖動效果

更新時間：2009年11月09日 16:49:21 作者：

js鼠標拖動對象，可讓任何div實現(xiàn)拖動效果,需要的朋友可以參考下。

js鼠標拖動對象：

 
//定義鼠標拖動對象 
drag=function (a,o){ 
     var d=document;if(!a)a=window.event; 
        if(!a.pageX)a.pageX=a.clientX; 
        if(!a.pageY)a.pageY=a.clientY; 
     var x=a.pageX,y=a.pageY; 
     if(o.setCapture) 
         o.setCapture(); 
     else if(window.captureEvents) 
         window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
     var backData = {x : o.style.top, y : o.style.left}; 
     d.onmousemove=function(a){ 
         if(!a)a=window.event; 
         if(!a.pageX)a.pageX=a.clientX; 
         if(!a.pageY)a.pageY=a.clientY; 
         var tx=a.pageX-x+parseInt(o.style.left),ty=a.pageY-y+parseInt(o.style.top); 
         o.style.left=tx+"px"; 
         o.style.top=ty+"px"; 
            x=a.pageX; 
            y=a.pageY; 
     }; 
     d.onmouseup=function(a){ 
         if(!a)a=window.event; 
         if(o.releaseCapture) 
             o.releaseCapture(); 
         else if(window.captureEvents) 
             window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
         d.onmousemove=null; 
         d.onmouseup=null; 
         if(!a.pageX)a.pageX=a.clientX; 
         if(!a.pageY)a.pageY=a.clientY; 
         if(!document.body.pageWidth)document.body.pageWidth=document.body.clientWidth; 
         if(!document.body.pageHeight)document.body.pageHeight=document.body.clientHeight; 
         if(a.pageX < 1 || a.pageY < 1 || a.pageX > document.body.pageWidth || a.pageY > document.body.pageHeight){ 
             o.style.left = backData.y; 
             o.style.top = backData.x; 
         } 
     }; 
} 

使用方法：

復(fù)制代碼代碼如下:

您可能感興趣的文章:

相關(guān)文章

原生JS實現(xiàn)鼠標滑動撒愛心特效
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)鼠標滑動撒愛心特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
Javascript事件熱鍵兼容ie|firefox
Javascript熱鍵兼容ie，firefox，需要的朋友可以參考下。
2010-12-12
javascript實現(xiàn)文字跑馬燈效果
這篇文章主要為大家詳細介紹了javascript實現(xiàn)文字跑馬燈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-06-06
JavaScript實現(xiàn)跟隨鼠標移動的盒子
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)跟隨鼠標移動的盒子，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-01-01
判斷是否存在子節(jié)點的實現(xiàn)代碼
下面小編就為大家?guī)硪黄袛嗍欠翊嬖谧庸?jié)點的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
2種簡單的js倒計時方式
這篇文章主要為大家詳細介紹了2個簡單js倒計時方式，一是帶天數(shù)的倒計時，二是單純分鐘和秒倒計時，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-10-10
js常用方法、檢查是否有特殊字符串、倒序截取字符串操作完整示例
這篇文章主要介紹了js常用方法、檢查是否有特殊字符串、倒序截取字符串操作,結(jié)合完整實例形式分析了JavaScript字符串轉(zhuǎn)換、檢測、倒序、截取等相關(guān)操作技巧,需要的朋友可以參考下
2020-01-01
查看Next.js默認配置信息的幾種方法
文章介紹了幾種查看Next.js默認配置信息的方法,包括使用Next.js CLI、getConfigAPI、實驗性CLI命令以及在開發(fā)模式下訪問特定路徑,感興趣的小伙伴跟著小編一起來看看吧
2025-02-02
web打印小結(jié)
本文主要介紹了一款比較強大的web打印工具lodop實現(xiàn)將winform客戶端的打印，移到網(wǎng)頁上由客戶自行打印，打印要求是根據(jù)一定的格式實現(xiàn)套打的過程與方法。具有一定的參考價值，下面跟著小編一起來看下吧
2017-01-01
js跳轉(zhuǎn)到指定url的方法與實際使用
這篇文章主要給大家介紹了關(guān)于js跳轉(zhuǎn)到指定url的方法與實際使用的相關(guān)資料,要實現(xiàn)JavaScript跳轉(zhuǎn)到指定URL,可以使用window.location對象來實現(xiàn),需要的朋友可以參考下
2023-09-09