js拖拽效果的原理及實現

一、拖拽的流程

1、滑鼠按下

2、滑鼠移動

3、滑鼠鬆開

二、拖拽時觸發的事件

1、按下滑鼠

要拖拽的元素.

onmousedown
=function
(e1)

document.

onmousemove
=function
(e)

document.

onmouseup
=function
(e)

1、不管是移動滑鼠還是鬆開滑鼠，都是在按下滑鼠的基礎上完成操作，所以在按下滑鼠時開始監聽移動滑鼠事件以及鬆開滑鼠事件

2、拖拽元素最關鍵的實際是移動滑鼠的過程，元素不管怎麼移動都是相對可視視窗的位置，也就是元素的移動是通過left和top這兩個屬性來移動的，所以在css樣式中需要給元素新增定位

3、在滑鼠鬆開時，滑鼠按下事件和滑鼠移動事件都將不在繼續執行，所以是需要刪除的

<

!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
div<
/style>
<
/head>
<
/div>
//獲取div元素
var div=document.
queryselector
("div");
// 按下時開始監聽在文件中滑鼠移動的事件
// 開始監聽滑鼠鬆開鍵的事件
div.
onmousedown
=function
(e1)
// 當釋放滑鼠鍵時，刪除滑鼠移動事件和刪除滑鼠釋放事件
document.
onmouseup
=function()
}

var utils=

(function()
,dragoff
(elem)
,mousehandler
(e);
document.self=
this
.self;
document.
addeventlistener
("mousemove"
,this
.self.mousehandler)
document.
addeventlistener
("mouseup"
,this
.self.mousehandler)
}else
if(e.type===
"mousemove"
)else
if(e.type===
"mouseup")}
}})(
);

var divs=document.

queryselectorall
("div");
for(
var i=
0;i)

js拖拽效果的原理及實現

js 拖拽乙個元素的原理 首先要明白三個值 滑鼠的位置a 盒子的位置b 滑鼠在盒子內的距離c 涉及到三個滑鼠事件 滑鼠按下時，mousedown 滑鼠移動時，mousemove 滑鼠鬆開時，mouseup 然後就可以開始講明實現過程了 滑鼠按下的時候，計算出c，滑鼠在盒子裡距離 滑鼠位置 盒子位置 ...

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才可以被拖拽...