以下只作为自己的笔迹记录
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
? ? ? ? "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
? ? <title></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>test1</li>
? ? <li>test2</li>
<li>test3</li>
<li>test4</li>
<li>test5</li>
<li>test6</li>
<li>test6</li>
<li>test7</li>
<li>test8</li>
<li>test9</li>
<li>test11</li>
<li>test12</li>
<li>test14</li>
<li>test13</li>
<li>test15</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>