节点可以移动的ul构造的树形
很多场景会用到树形结构，比如人事组织、新闻频道、各种层级分类、文件目录等等。简单的为节点设置父节点就可以构造出来，通过为其选择父节点从而对其进行移动。如果可以拖动移动岂不是很直观吗，于是编了一个例子（可以拖动节点和通过上下键对同级节点进行排序）。Web上的实现方式有ms的htc，有用table签的有用ul的，我倾向于选择ul因为它简单直接。下面是抓图：
程序原代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>abcdefg</title>
<style>
</style>
</head>
<body>
<ul id="rootul">
<li id="root">根
<ul id="ul">
<li>1abcdefg
<ul>
<li>1.1hijklmn</li>
<li>1.2hijklmn</li>
<li>1.3hijklmn</li>
<li>1.4hijklmn</li>
</ul>
</li>
<li>2abcdefg</li>
<li>3abcdefg</li>
<li>4abcdefg</li>
<li>5abcdefg</li>
<li>6abcdefg</li>
</ul>
</li>
</ul>
<div id="result" style="border:solid 1px red">
</div>
</body>
<script language="javascript">
var Drag = {
objs:[],
dragging : false,
current : null,
temp : null,
_temp : null,
add :function(element){
this.objs.push(element)
element.onmousedown = Drag.start
element.onmouseover = this.mouseover
element.onmouseout = this.mouseout
},
start:function(){
if(!Drag.temp){
var li = document.createElement('li')
Drag.temp = li
li.style.position = 'absolute'
li.style.border = 'solid 1px red'
li.left = event.clientX+'px'
li.top = event.clientY+'px'
document.body.appendChild(li)
}
var li = Drag.temp
li.innerHTML = this.innerHTML
li.style.display = 'block'
li.style.left = event.clientX+'px'
li.style.top = event.clientY+'px'
Drag.current = this
event.cancelBubble = true
Drag._temp = this
},
drag:function(){
if(Drag.current){
var li = Drag.temp
li.style.left = event.clientX+'px'
li.style.top = event.clientY+'px'
}
},
end:function(){
if(Drag.current && Drag.currrent!= Drag.target){
var li = Drag.target
var ul = null
var arr = li.getElementsByTagName('ul')
if(arr.length == 0){
ul = document.createElement('ul')
li.appendChild(ul)
}else{
ul = arr[0]
}
ul.appendChild(Drag.current)
//document.getElementById('result').innerText = document.getElementById('ul').innerHTML
}
Drag.current = null
Drag.temp.style.display = 'none'
},
mouseover:function(){
Drag.target = this
this.style.border = 'solid 1px red'
event.cancelBubble = true
},
mouseout:function(){
this.style.border = ''
}
}
document.onselectstart = function(){return false}
var arrli = ul.getElementsByTagName('li')
for(var i=0; i<arrli.length; i++){
var li = arrli[i]
if(li.children.length==0 || true){
li.style.cursor = 'move'
Drag.add(arrli[i])
}
}
Drag.add(root)
document.onmouseup = Drag.end
document.onmousemove = Drag.drag
document.onkeydown = function(){
if(Drag._temp){
var element = Drag._temp
var arr = element.parentElement.children
var index = -1
for(var i=0; i<arr.length; i++){
if(arr[i] == element){
index = i
break
}
}
switch(event.keyCode){
case 38:
if(index == 0){
return
}else{
element.parentElement.insertBefore(element, arr[index-1])
}
break
case 40:
if(index == arr.length-1){
return
}else if(index == arr.length-2){
element.parentElement.appendChild(element)
}else{
element.parentElement.insertBefore(element, arr[index+2])
}
break
}
}
}
//document.getElementById('result').innerText = document.getElementById('rootul').innerHTML
</script>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>abcdefg</title>
<style>
</style>
</head>
<body>
<ul id="rootul">
<li id="root">根
<ul id="ul">
<li>1abcdefg
<ul>
<li>1.1hijklmn</li>
<li>1.2hijklmn</li>
<li>1.3hijklmn</li>
<li>1.4hijklmn</li>
</ul>
</li>
<li>2abcdefg</li>
<li>3abcdefg</li>
<li>4abcdefg</li>
<li>5abcdefg</li>
<li>6abcdefg</li>
</ul>
</li>
</ul>
<div id="result" style="border:solid 1px red">
</div>
</body>
<script language="javascript">
var Drag = {
objs:[],
dragging : false,
current : null,
temp : null,
_temp : null,
add :function(element){
this.objs.push(element)
element.onmousedown = Drag.start
element.onmouseover = this.mouseover
element.onmouseout = this.mouseout
},
start:function(){
if(!Drag.temp){
var li = document.createElement('li')
Drag.temp = li
li.style.position = 'absolute'
li.style.border = 'solid 1px red'
li.left = event.clientX+'px'
li.top = event.clientY+'px'
document.body.appendChild(li)
}
var li = Drag.temp
li.innerHTML = this.innerHTML
li.style.display = 'block'
li.style.left = event.clientX+'px'
li.style.top = event.clientY+'px'
Drag.current = this
event.cancelBubble = true
Drag._temp = this
},
drag:function(){
if(Drag.current){
var li = Drag.temp
li.style.left = event.clientX+'px'
li.style.top = event.clientY+'px'
}
},
end:function(){
if(Drag.current && Drag.currrent!= Drag.target){
var li = Drag.target
var ul = null
var arr = li.getElementsByTagName('ul')
if(arr.length == 0){
ul = document.createElement('ul')
li.appendChild(ul)
}else{
ul = arr[0]
}
ul.appendChild(Drag.current)
//document.getElementById('result').innerText = document.getElementById('ul').innerHTML
}
Drag.current = null
Drag.temp.style.display = 'none'
},
mouseover:function(){
Drag.target = this
this.style.border = 'solid 1px red'
event.cancelBubble = true
},
mouseout:function(){
this.style.border = ''
}
}
document.onselectstart = function(){return false}
var arrli = ul.getElementsByTagName('li')
for(var i=0; i<arrli.length; i++){
var li = arrli[i]
if(li.children.length==0 || true){
li.style.cursor = 'move'
Drag.add(arrli[i])
}
}
Drag.add(root)
document.onmouseup = Drag.end
document.onmousemove = Drag.drag
document.onkeydown = function(){
if(Drag._temp){
var element = Drag._temp
var arr = element.parentElement.children
var index = -1
for(var i=0; i<arr.length; i++){
if(arr[i] == element){
index = i
break
}
}
switch(event.keyCode){
case 38:
if(index == 0){
return
}else{
element.parentElement.insertBefore(element, arr[index-1])
}
break
case 40:
if(index == arr.length-1){
return
}else if(index == arr.length-2){
element.parentElement.appendChild(element)
}else{
element.parentElement.insertBefore(element, arr[index+2])
}
break
}
}
}
//document.getElementById('result').innerText = document.getElementById('rootul').innerHTML
</script>
</html>
