节点可以移动的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 >

转载于:https://www.cnblogs.com/hzuIT/articles/734259.html