<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS 实现元素排序</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
-moz-user-select: none;
}
ul {
margin: 100px;
border: 1px solid #adff2f;
list-style: none;
}
li {
height: 30px;
line-height: 30px;
padding: 0;
list-style: none;
}
li:hover {
background: #bdb76b;
cursor: move;
}
</style>
</head>
<body>
<ul id="outer_wrap">
<li>第一条</li>
<li>第二条</li>
<li>第三条</li>
<li>第四条</li>
<li>第五条</li>
<li>第六条</li>
<li>第七条</li>
<li>第八条</li>
</ul>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
//获取鼠标位置
function getMousePos(e) {
return {
x: e.pageX || e.clientX + document.body.scrollLeft,
y: e.pageY || e.clientY + document.body.scrollTop
}
}
//获取元素位置
function getElementPos(el) {
return {
x: el.offsetParent ? el.offsetLeft + arguments.callee(el.offsetParent)['x'] : el.offsetLeft,
y: el.offsetParent ? el.offsetTop + arguments.callee(el.offsetParent)['y'] : el.offsetTop
}
}
//获取元素尺寸
function getElementSize(el) {
return {
width: el.offsetWidth,
height: el.offsetHeight
}
}
//禁止选择
document.onselectstart = function () {
return false;
}
//判断是否有挪动
var MOVE = {};
MOVE.isMove = false;
//就是创建的标杆
var div = document.createElement('div');
div.style.width = '400px';
div.style.height = '1px';
div.style.fontSize = '0';
div.style.background = 'red';
var outer_wrap = $('outer_wrap');
outer_wrap.onmousedown = function (event) {
//获取列表顺序
var lis = outer_wrap.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i]['pos'] = getElementPos(lis[i]);
lis[i]['size'] = getElementSize(lis[i]);
}
event = event || window.event;
var t = event.target || event.srcElement;
if (t.tagName.toLowerCase() == 'li') {
var p = getMousePos(event);
var el = t.cloneNode(true);
el.style.position = 'absolute';
el.style.left = t.pos.x + 'px';
el.style.top = t.pos.y + 'px';
el.style.width = t.size.width + 'px';
el.style.height = t.size.height + 'px';
el.style.border = '1px solid #d4d4d4';
el.style.background = '#d4d4d4';
el.style.opacity = '0.7';
document.body.appendChild(el);
document.onmousemove = function (event) {
event = event || window.event;
var current = getMousePos(event);
el.style.left = t.pos.x + current.x - p.x + 'px';
el.style.top = t.pos.y + current.y - p.y + 'px';
document.body.style.cursor = 'move';
//判断插入点
for (var i = 0; i < lis.length; i++) {
if (current.x > lis[i]['pos']['x'] && current.x < lis[i]['pos']['x'] + lis[i]['size'][
'width'
] && current.y > lis[i]['pos']['y'] && current.y < lis[i]['pos']['y'] + lis[i][
'size'
]['height'] / 2) {
if (t != lis[i]) {
MOVE.isMove = true;
outer_wrap.insertBefore(div, lis[i]);
}
} else if (current.x > lis[i]['pos']['x'] && current.x < lis[i]['pos']['x'] + lis[i][
'size'
]['width'] && current.y > lis[i]['pos']['y'] + lis[i]['size']['height'] / 2 &&
current.y < lis[i]['pos']['y'] + lis[i]['size']['height']) {
if (t != lis[i]) {
MOVE.isMove = true;
outer_wrap.insertBefore(div, lis[i].nextSibling);
}
}
}
}
//移除事件
document.onmouseup = function (event) {
event = event || window.event;
document.onmousemove = null;
if (MOVE.isMove) {
outer_wrap.replaceChild(t, div);
MOVE.isMove = false;
}
document.body.removeChild(el);
el = null;
document.body.style.cursor = 'normal';
document.onmouseup = null;
}
}
}
</script>
</body>
</html>