JavaScript實(shí)現(xiàn)簡單的拖動(dòng)效果
拖動(dòng)是一件非常酷的事情。你點(diǎn)擊某個(gè)對(duì)象,并按住鼠標(biāo)不放,將鼠標(biāo)移動(dòng)到另一個(gè)區(qū)域,然后釋放鼠標(biāo)按鈕將對(duì)象放在這里。
下面是一個(gè)簡單的案例:
HTML部分:注意,拖動(dòng)元素一定要為絕對(duì)定義,即position = absolute;
<script src="dome.js"></script>
JS部分(dome.js):
var EventUtil = { // 獲取事件和目標(biāo) getEvent : function (event) { return event ? event : window.event; }, getTarget : function (event) { return event.target || event.srcElement; }, // 添加監(jiān)聽事件 addEvent : function (element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent("on" + type, handler); } }, // 注銷監(jiān)聽事件 delEvent : function (element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else if (element.detachEvent) { element.detachEvent("on" + type, handler); } } } var DragDrop = function () { // 判斷DOM元素是否正在被拖動(dòng)的標(biāo)志 var dragging = null; // DOM元素左上角與鼠標(biāo)指針的差值 diffX = 0; diffY = 0; function handleEvent(event) { event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); switch (event.type) { case "mousedown" : // 判斷DOM元素的class中是否含有draggable屬性 if (target.className.indexOf("draggable") > -1) { dragging = target; diffX = event.clientX - target.offsetLeft; diffY = event.clientY - target.offsetTop; } break; case "mousemove" : if (dragging != null) { target.style.left = event.clientX - diffX + "px"; target.style.top = event.clientY - diffY + "px"; } break; case "mouseup" : dragging = null; break; } } return { enable : function () { EventUtil.addEvent(document, "mousedown", handleEvent); EventUtil.addEvent(document, "mousemove", handleEvent); EventUtil.addEvent(document, "mouseup", handleEvent); }, disable : function () { EventUtil.delEvent(document, "mousedown", handleEvent); EventUtil.delEvent(document, "mousemove", handleEvent); EventUtil.delEvent(document, "mouseup", handleEvent); } } }(); DragDrop.enable();
這里需要講解的是diffX和diffY,它們表示元素左上角與鼠標(biāo)指針的差值。
diffX = 鼠標(biāo)的x坐標(biāo) - 元素對(duì)象的offsetLeft
diffY = 鼠標(biāo)的y坐標(biāo) - 元素對(duì)象的offsetTop
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
- 比較精簡的Javascript拖動(dòng)效果函數(shù)代碼
- javascript之可拖動(dòng)的iframe效果代碼
- javascript div 彈出可拖動(dòng)窗口
- 利用javascript移動(dòng)div層-javascript 拖動(dòng)層
- js 鼠標(biāo)拖動(dòng)對(duì)象 可讓任何div實(shí)現(xiàn)拖動(dòng)效果
- 鼠標(biāo)拖動(dòng)動(dòng)態(tài)改變表格的寬度的js腳本 兼容ie/firefox
- 使用ExtJS技術(shù)實(shí)現(xiàn)的拖動(dòng)樹結(jié)點(diǎn)
- JS高級(jí)拖動(dòng)技術(shù) setCapture,releaseCapture
- javascript 事件處理、鼠標(biāo)拖動(dòng)效果實(shí)現(xiàn)方法詳解
- js實(shí)現(xiàn)可拖動(dòng)DIV的方法
相關(guān)文章
刷新頁面實(shí)現(xiàn)方式總結(jié)(HTML,ASP,JS)
多種方法實(shí)現(xiàn)頁面的刷新代碼2008-11-11微信小程序?qū)崿F(xiàn)發(fā)動(dòng)態(tài)功能的示例代碼
最近做了一個(gè)校園拍賣小程序,想在里面添加一個(gè)類似校園圈功能,現(xiàn)在來一步一步實(shí)現(xiàn),對(duì)微信小程序?qū)崿F(xiàn)發(fā)動(dòng)態(tài)功能感興趣的朋友一起看看吧2022-08-08document節(jié)點(diǎn)對(duì)象的獲取方式示例介紹
如果要操作一個(gè)元素,首先要獲取到它,下面為大家介紹下document節(jié)點(diǎn)對(duì)象的獲取方式,感興趣的朋友不要錯(cuò)過2013-12-12Java 正則表達(dá)式學(xué)習(xí)總結(jié)和一些小例子
字符串處理是許多程序中非常重要的一部分,它們可以用于文本顯示,數(shù)據(jù)表示,查找鍵和很多目的.在Unix下,用戶可以使用正則表達(dá)式的強(qiáng)健功能實(shí)現(xiàn)這些 目的2012-09-09Javascript網(wǎng)頁搶紅包外掛實(shí)現(xiàn)分享
本篇文章通過一個(gè)搶紅包的網(wǎng)頁實(shí)例講述了Javascript書寫的原理以及思路,有興趣的朋友參考學(xué)習(xí)下。2018-01-01深入理解JavaScript 中的匿名函數(shù)((function() {})();)與變量的作用域
匿名函數(shù)沒有實(shí)際名字的函數(shù),匿名函數(shù)(function() {})();是一個(gè)特殊的閉包寫法。本文蛀牙給大家介紹JavaScript 中的匿名函數(shù)((function() {})();)與變量的作用域,需要的朋友可以參考下2018-08-08教你用幾十行js實(shí)現(xiàn)很炫的canvas交互特效
HTML5中的大部分動(dòng)畫都是通過Canvas實(shí)現(xiàn),因?yàn)镃anvas就像一塊畫布,我們可以通過調(diào)用腳本在Canvas上繪制任意形狀,甚至是制作動(dòng)畫,這篇文章主要給大家介紹了關(guān)于用幾十行js實(shí)現(xiàn)很炫的canvas交互特效的相關(guān)資料,需要的朋友可以參考下2021-11-11