原生js使用drag實現拖拽排序

先介紹一下html5的drag屬性,拖放（drag 和 drop）是 html5 標準的組成部分。想要啟用drag，只要給元素加上draggable="true"就行了（safari 5.1.2除外）。

實際效果：

拖動事件(了解事件詳情)

事件分為兩類，當前拖動的元素上的事件，以及要放置的位置接收到的事件。

一.發生在拖動元素上的事件：

事件名 觸發時機 觸發次數

dragstart 當拖動開始時觸發一次 1

drag 拖動開始後反覆觸發 n

dragend 拖動結束後觸發一次

事件名 觸發時機 觸發次數

dragenter 當拖動元素進入目標時觸發一次 1

dragover 當拖動元素在目標元素範圍內時反覆觸發 n

drop 拖動元素在目標元素內釋放時(在設定了dropover事件的前提下) 1

在拖動元素時可以設定傳遞的資訊

event.datatransfer.setdata(「te」, 「sss);

兩個引數，第乙個引數key，第二個引數value。

注意只能傳遞字串和url，但是在firefox使用text或text作為key時會開啟新的標籤頁，所以不要用他們作為key。

下面是**例項：

<

!doctype html>
"en"
>
"utf-8"
>
title<
/title>
*       #container
.ele 
<
/style>
<
/head>
"container"
>
="ele" draggable=
"true"
>
1<
/li>
="ele" draggable=
"true"
>
2<
/li>
="ele" draggable=
"true"
>
3<
/li>
="ele" draggable=
"true"
>
4<
/li>
<
/ul>
var node = document.
queryselector
("#container");
var draging =
null
;//使用事件委託，將li的事件委託給ul
node.
ondragstart
=function
(event)
node.
ondragover
=function
(event)}if
(_index
(draging)
<
_index
(target)
)else
_animate
(dragingrect, draging)
;_animate
(targetrect, target);}
}}//獲取元素在父元素中的index
function
_index
(el)
//previouselementsibling屬性返回指定元素的前乙個兄弟元素（相同節點樹層中的前乙個元素節點）。
while
(el &&
(el = el.previouselementsibling)
)return index;
}function
_animate
(prevrect, target)
_css
(target,
'transition'
,'none');
_css
(target,
'transform'
,'translate3d('
+(prevrect.left - currentrect.left)
+'px,'
+(prevrect.top - currentrect.top)
+'px,0)');
target.offsetwidth;
// 觸發重繪
//放在timeout裡面也可以
// settimeout(function() , 0);
_css
(target,
'transition'
,'all '
+ ms +
'ms');
_css
(target,
'transform'
,'translate3d(0,0,0)');
cleartimeout
(target.animated)
;            target.animated =
settimeout
(function()
, ms);}
}//給元素新增style
function
_css
(el, prop, val)
else
if(el.currentstyle)
return prop ===
void
0? val : val[prop];}
else
style[prop]
= val +
(typeof val ===
'string'?''
:'px');
}}}<
/script>
<
/body>
<
/html>

原生js實現拖拽盒子

盒子必須是絕對定位的盒子 滑鼠在盒子內部按下時獲得相對座標。事件物件在頁面的位置減去盒子距離body的距離 滑鼠移動時，使得盒子的位置發生變化 滑鼠鬆開時，不再拖動 移動事件失效 lang zh charset utf 8 name viewport content width device wid...

原生JS拖拽

想要讓整個元素移動需要三個事件 滑鼠按下 onmousedown 滑鼠移動 onmousemove 滑鼠抬起 onmouseup html 登入會員 關閉使用者名稱 登入密碼 登入會員 頁面效果如下 jsvar login document.queryselector login 獲取整個彈框的內容...

vue下使用drag完成簡單拖拽

因為沒有時間研究jquery的sortable功能 也沒有文件 所以用html5的drag完成了簡單的拖拽，這裡記錄下 dragstart dragover dragend dragable dragable 確認可以被拖拽的元素 script內部 拖拽開始 ondragstart e 拖拽過程 o...