lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
html,
body
.box
style
>
head
>
>
class
="box"
>
div>
body
>
html
>
/*
* 拖拽思路：
滑鼠開始位置a
滑鼠當前位置b（滑鼠移動過程中隨時計算的）
盒子開始位置c
盒子當前位置d = （b - a）+ c
* 拖拽觸發的條件：
1、滑鼠按住盒子才開始拖拽，滑鼠抬起則結束拖拽
2、拖拽開始後，滑鼠移動盒子才會跟著移動的
滑鼠按住盒子 mousedown
+ 記錄c
+ 記錄a
滑鼠移動 mousemove
+ 獲取b
+ 動態計算出d
+ 修改盒子的樣式，從而讓盒子跟著移動
滑鼠抬起 mouseup
+ 取消拖拽
*/// left top absolute 是距離body 的
// getboundingclientrect clientx/clienty 是距離視窗的
let box = document.
queryselector
('.box');
// 獲取當前螢幕盒子可移動的範圍
let screen = document.documentelement,
boxdata = box.
getboundingclientrect()
, minl =0,
mint =0,
maxl = screen.clientwidth - boxdata.width,
maxt = screen.clientheight - boxdata.height;
// 注意統一參照物，盒子位置、滑鼠位置是距離視窗的，還是距離body的
// 滑鼠按下開始拖拽
function
down
(ev)
=this
.getboundingclientrect()
;// 把盒子起始位置以自定義屬性的方式儲存在盒子上
this
.boxtop = top;
this
.boxleft = left;
// 把滑鼠的起始位置也儲存下來
// this.setcapture(); // ie和火狐解決焦點丟失問題方法（對谷歌無用）
this
.mou*** = ev.clientx;
this
.mousey = ev.clienty;
// 滑鼠按下才做事件繫結
// box.addeventlistener('mousemove', move);
// box.addeventlistener('mouseup', up);
// 利用事件委託解決焦點丟失問題（注意方法中的this指向，同時還要考慮怎麼移除）
this
.movefn = move.
bind
(this);
// bind會改變函式中的this指向，之後返回乙個匿名函式
this
.upfn = up.
bind
(this);
window.
addeventlistener
('mousemove'
,this
.movefn)
; window.
addeventlistener
('mouseup'
,this
.upfn);}
// 滑鼠移動拖拽中
function
move
(ev)
// 滑鼠抬起，拖拽結束
function
up(ev)
box.
addeventlistener
('mousedown'
, down)
;
js實現滑鼠拖拽效果
拖拽狀態 0 滑鼠在元素上按下的時候 滑鼠在元素上移動的時候 滑鼠在任何時候放開的時候 將以上思路翻譯成js 就可以實現拖拽的效果了。上面這個原理也可以演變為 拖拽原理2 拖拽狀態 0 滑鼠在元素上按下的時候 滑鼠在元素上移動的時候 滑鼠在任何時候放開的時候 將以上思路翻譯成js 就可以實現拖拽的效...
JS實現拖拽效果 Sestid
1 在css中設定你要進行拖拽的或者元素的樣式 2 在js中獲取元素，以及他的寬高和瀏覽器的寬高 3 在要被拖拽的元素上繫結滑鼠按下事件 4 阻止瀏覽器預設行為 5 獲取游標在元素按下時的座標 6 繫結元素移動事件 7 獲取游標在可視視窗的座標 8 計算拖動的定位位置 9 判斷是否在視窗範圍內 10...
js實現拖拽效果（一） 原理實現
js 拖拽乙個元素的原理 首先要明白三個值 滑鼠的位置a 盒子的位置b 滑鼠在盒子內的距離c 涉及到三個滑鼠事件 然後就可以開始講明實現過程了 html class box div css box box hover js var box document.queryselector box 獲取元...