JavaScript實(shí)現(xiàn)簡單拖拽效果
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)簡單拖拽效果的具體代碼,供大家參考,具體內(nèi)容如下
先看實(shí)現(xiàn)的效果:
思路:里面用到了三個事件,鼠標(biāo)按下、移動、松開事件
那么首先創(chuàng)建盒子并且給它賦予css樣式
HTML:
// html <div> <p>我是個藍(lán)色的盒子</p> </div>
CSS:
CSS *{margin: 0;padding: 0;} div{ width: 100px; height: 100px; background-color: cornflowerblue; position: absolute; } p{ width: 100px; height: 100px; line-height: 100px; font-size: 10px; color: #fff; text-align: center; transition: .5s all; } p:hover{ transform: translateY(-5px); transition: .5s all; box-shadow: 10px 10px 5px gray; }
然后在JS設(shè)置相應(yīng)的方法
var div = document.querySelector('div'); var p = document.querySelector('p'); // 先定義初始化變量x、y var x =0; var y = 0; // var i = 3; var TorF= false; //盒子里的文字無法被選中 div.onselectstart = function (e) { return false; } div.addEventListener('mousedown',function(e){ // client:鼠標(biāo)按鈕時輸出鼠標(biāo)指針的坐標(biāo) x = e.clientX; y = e.clientY; // 格式:obj.offsetLeft:獲取左和上的偏移量 // 在這里特別說明一下:這個屬性是只讀的,不能夠賦值。 // 返回當(dāng)前元素距離父元素(body)左邊的距離 // 這里的l,t并不是聲明了一個全局變量,而是創(chuàng)建了一個全局對象的屬性。 l = div.offsetLeft; t = div.offsetTop; // 鼠標(biāo)設(shè)置移動箭頭 div.style.cursor = 'move'; p.innerHTML = '我被按下了 ^_^'; TorF= true; }); // 當(dāng)整個屏幕觸發(fā)移動事件時 document.addEventListener('mousemove',function(e){ // 如果為false則終止函數(shù)的執(zhí)行并返回函數(shù)的值 if (Torf == false) { return; } // 在此函數(shù)中定義局部變量 var twox = e.clientX; var twoy = e.clientY; // 用獲取到的鼠標(biāo)指針的坐標(biāo) - (鼠標(biāo)指針的坐標(biāo) - 偏移量) = 實(shí)際鼠標(biāo)拖動的位置 // 后面一定要加上px單位,因?yàn)楸旧慝@取是沒有單位的 var twol = twox - (x-l); var twot = twoy - (y-t); div.style.left = twol+'px'; div.style.top = twot+'px'; p.innerHTML = '我正在被拖動 -.-'; }); div.addEventListener('mouseup',function(){ // 松開鍵盤時停止鼠標(biāo)移動事件 TorF= false; // 鼠標(biāo)恢復(fù)默認(rèn)樣式 div.style.cursor = 'default'; p.innerHTML = '我被彈開了QAQ'; })
注意:
1、想控制某一個盒子的位置,必須給盒子添加定位,否則盒子不會動
2、offsetLeft這個屬性是只讀的,不能夠賦值
3、鼠標(biāo)位置的的計(jì)算:鼠標(biāo)指針的坐標(biāo) - (鼠標(biāo)指針的坐標(biāo) - 偏移量) = 實(shí)際鼠標(biāo)拖動的位置
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JavaScript中常用的數(shù)組操作方法
- 深入淺出探究JavaScript中的async與await
- JavaScript實(shí)現(xiàn)經(jīng)典貪吃蛇游戲
- Javascript基礎(chǔ)知識中關(guān)于內(nèi)置對象的知識
- JavaScript 運(yùn)行機(jī)制詳解再淺談Event Loop
- Python 協(xié)程與 JavaScript 協(xié)程的對比
- javascript實(shí)現(xiàn)鼠標(biāo)拖尾特效
- JavaScript 數(shù)組去重詳解
- JavaScript實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲
- JavaScript setinterval延遲一秒解決方案
- JavaScript 上傳文件限制參數(shù)案例詳解
- 簡單談?wù)凧avaScript變量提升
- 深入理解JavaScript的事件執(zhí)行機(jī)制
- 8個工程必備的JavaScript代碼片段
相關(guān)文章
基于Web?Components實(shí)現(xiàn)一個日歷原生組件
這篇文章主要為大家詳細(xì)介紹了如何利用Web?Components實(shí)現(xiàn)一個簡單的日歷原生組件,文中的示例代碼講解詳細(xì),需要的小伙伴可以了解一下2023-07-07js中刪除數(shù)組中的某一元素實(shí)例(無下標(biāo)時)
下面小編就為大家?guī)硪黄猨s中刪除數(shù)組中的某一元素實(shí)例(無下標(biāo)時)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02javascript:FF/Chrome與IE動態(tài)加載元素的區(qū)別說明
今天在寫一段js時,發(fā)現(xiàn)IE與FF在動態(tài)加載Html元素時,有一些差別,一起過來看看下面的代碼吧2014-01-01layui 實(shí)現(xiàn)table翻頁滾動條位置保持不變的例子
今天小編就為大家分享一篇layui 實(shí)現(xiàn)table翻頁滾動條位置保持不變的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊左上角滑動菜單效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊左上角滑動菜單效果代碼,涉及JavaScript基于鼠標(biāo)事件動態(tài)變換頁面元素樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09antd項(xiàng)目實(shí)現(xiàn)彩蛋效果的詳細(xì)代碼
這篇文章主要介紹了antd項(xiàng)目如何實(shí)現(xiàn)彩蛋效果,首先在components目錄下創(chuàng)建Transform目錄,包括index.css、index.js,index.js是主要的邏輯代碼,下面對代碼進(jìn)行分析,需要的朋友可以參考下2022-09-09