先介紹一下html5的drag屬性,拖放（Drag 和 drop）是 HTML5 標(biāo)準(zhǔn)的組成部分。想要啟用drag，只要給元素加上draggable="true"就行了（Safari 5.1.2除外）。
拖動(dòng)事件
事件分為兩類，當(dāng)前拖動(dòng)的元素上的事件，以及要放置的位置接收到的事件。
一.發(fā)生在拖動(dòng)元素上的事件：
事件名 觸發(fā)時(shí)機(jī) 觸發(fā)次數(shù)
dragstart 當(dāng)拖動(dòng)開始時(shí)觸發(fā)一次 1
drag 拖動(dòng)開始后反復(fù)觸發(fā) n
dragend 拖動(dòng)結(jié)束后觸發(fā)一次
二.發(fā)生在目標(biāo)元素上的事件
事件名 觸發(fā)時(shí)機(jī) 觸發(fā)次數(shù)
dragenter 當(dāng)拖動(dòng)元素進(jìn)入目標(biāo)時(shí)觸發(fā)一次 1
dragover 當(dāng)拖動(dòng)元素在目標(biāo)元素范圍內(nèi)時(shí)反復(fù)觸發(fā) n
drop 拖動(dòng)元素在目標(biāo)元素內(nèi)釋放時(shí)(在設(shè)置了dropover事件的前提下) 1
信息傳遞
在拖動(dòng)元素時(shí)可以設(shè)置傳遞的信息
event.dataTransfer.setData(“te”, “sss);
兩個(gè)參數(shù)，第一個(gè)參數(shù)key，第二個(gè)參數(shù)value。
注意只能傳遞字符串和url，但是在firefox使用text或Text作為key時(shí)會(huì)打開新的標(biāo)簽頁(yè)，所以不要用他們作為key。
注意：設(shè)置了dragover后drop才會(huì)觸發(fā)！！文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-511489.html
下面是代碼實(shí)例：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-511489.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
list-style: none;
margin: 0;
padding: 0;
}
#container{
width: 500px;
margin: 100px auto;
}
.ele {
width:100%;
height: 40px;
border: 1px solid #999;
background: cadetblue;
margin-top: 2px;
border-radius: 10px;
padding-left: 10px;
color: white;
cursor: move;
}
</style>
</head>
<body>
<ul id="container">
<li class="ele" draggable="true">1</li>
<li class="ele" draggable="true">2</li>
<li class="ele" draggable="true">3</li>
<li class="ele" draggable="true">4</li>
</ul>
<script>
var node = document.querySelector("#container");
var draging = null;
//使用事件委托，將li的事件委托給ul
node.ondragstart = function(event) {
//console.log("start");
//firefox設(shè)置了setData后元素才能拖動(dòng)！?。?！
//event.target出發(fā)事件的元素
event.dataTransfer.setData("te", event.target.innerText); //不能使用text，firefox會(huì)打開新tab
//event.dataTransfer.setData("self", event.target);
draging = event.target;
}
node.ondragover = function(event) {
//console.log("onDrop over");
//取消默認(rèn)行為
event.preventDefault();
var target = event.target;
//因?yàn)閐ragover會(huì)發(fā)生在ul上，所以要判斷是不是li
if (target.nodeName === "LI") {
if (target !== draging) {
//getBoundingClientRect()用于獲取某個(gè)元素相對(duì)于視窗的位置集合
var targetRect = target.getBoundingClientRect();
var dragingRect = draging.getBoundingClientRect();
if (target) {
if (target.animated) {
return;
}
}
if (_index(draging) < _index(target)) {
//nextSibling 屬性可返回某個(gè)元素之后緊跟的節(jié)點(diǎn)（處于同一樹層級(jí)中）。
target.parentNode.insertBefore(draging, target.nextSibling);
} else {
target.parentNode.insertBefore(draging, target);
}
_animate(dragingRect, draging);
_animate(targetRect, target);
}
}
}
//獲取元素在父元素中的index
function _index(el) {
var index = 0;
if (!el || !el.parentNode) {
return -1;
}
//previousElementSibling屬性返回指定元素的前一個(gè)兄弟元素（相同節(jié)點(diǎn)樹層中的前一個(gè)元素節(jié)點(diǎn)）。
while (el && (el = el.previousElementSibling)) {
//console.log(el);
index++;
}
return index;
}
function _animate(prevRect, target) {
var ms = 300;
if (ms) {
var currentRect = target.getBoundingClientRect();
//nodeType 屬性返回以數(shù)字值返回指定節(jié)點(diǎn)的節(jié)點(diǎn)類型。1=元素節(jié)點(diǎn) 2=屬性節(jié)點(diǎn)
if (prevRect.nodeType === 1) {
prevRect = prevRect.getBoundingClientRect();
}
_css(target, 'transition', 'none');
_css(target, 'transform', 'translate3d(' +
(prevRect.left - currentRect.left) + 'px,' +
(prevRect.top - currentRect.top) + 'px,0)'
);
target.offsetWidth; // 觸發(fā)重繪
//放在timeout里面也可以
// setTimeout(function() {
// _css(target, 'transition', 'all ' + ms + 'ms');
// _css(target, 'transform', 'translate3d(0,0,0)');
// }, 0);
_css(target, 'transition', 'all ' + ms + 'ms');
_css(target, 'transform', 'translate3d(0,0,0)');
clearTimeout(target.animated);
target.animated = setTimeout(function() {
_css(target, 'transition', '');
_css(target, 'transform', '');
target.animated = false;
}, ms);
}
}
//給元素添加style
function _css(el, prop, val) {
var style = el && el.style;
if (style) {
if (val === void 0) {
//使用DefaultView屬性可以指定打開窗體時(shí)所用的視圖
if (document.defaultView && document.defaultView.getComputedStyle) {
val = document.defaultView.getComputedStyle(el, '');
} else if (el.currentStyle) {
val = el.currentStyle;
}
return prop === void 0 ? val : val[prop];
} else {
if (!(prop in style)) {
prop = '-webkit-' + prop;
}
style[prop] = val + (typeof val === 'string' ? '' : 'px');
}
}
}
</script>
</body>
</html>
到了這里，關(guān)于HTML5、JS實(shí)現(xiàn)元素拖拽排序的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
