js拖拽效果的原理及實現

2021-10-09 16:42:14 字數 1101 閱讀 6252

js 拖拽乙個元素的原理：

首先要明白三個值

滑鼠的位置a =

盒子的位置b =

滑鼠在盒子內的距離c =

涉及到三個滑鼠事件

滑鼠按下時，mousedown

滑鼠移動時，mousemove

滑鼠鬆開時，mouseup

然後就可以開始講明實現過程了

滑鼠按下的時候，計算出c，滑鼠在盒子裡距離（滑鼠位置 - 盒子位置）

滑鼠移動的時候，更新盒子位置 b = a - c

滑鼠鬆開的時候，關閉2, 3過程的兩個滑鼠***

html
css

.box 


.box:hover
js

var box = document.queryselector('.box')


// 獲取元素的樣式


var getstyle = function(element)


// 獲取目標元素的位置


var gettargetpos = function(elem) 


return pos} 


// 設定目標元素的位置


var settargetpos = function(elem, pos) 


box.addeventlistener('mousedown', function(event) 


// 滑鼠按下的時候，記錄滑鼠在div內部的距離


var innerdis = 


var move = function(event) )


}var end = function() 


// 必須繫結在document物件上，如果繫結在box物件上，當滑鼠脱快了移出box盒子時，就會產生bug


document.addeventlistener('mousemove', move, false)


document.addeventlistener('mouseup', end, false)

js拖拽效果的原理及實現

一 拖拽的流程 1 滑鼠按下 2 滑鼠移動 3 滑鼠鬆開 二 拖拽時觸發的事件 1 按下滑鼠 要拖拽的元素.onmousedown function e1 2 移動滑鼠 document.onmousemove function e 3 鬆開滑鼠 document.onmouseup functio...

js實現拖拽效果（一） 原理實現

js 拖拽乙個元素的原理 首先要明白三個值 滑鼠的位置a 盒子的位置b 滑鼠在盒子內的距離c 涉及到三個滑鼠事件 然後就可以開始講明實現過程了 html class box div css box box hover js var box document.queryselector box 獲取元...

拖拽效果的實現原理分析

一 html5現在已經提供支援拖動和拖放的api了，所以，支援html5的瀏覽器可以不必折騰了，直接使用吧。關於html5的拖拽api 請檢視 以下摘錄一些 比較重要的物件和事件以及屬性 首先，要使元素能否能被拖拽，必須設定 draggable true 例如 只有設定draggable才可以被拖拽...