导航栏： 首页 评论列表

可拖动DOM模型2

默认分类 2011-04-05 20:26:47

转载:http://kenshin54.iteye.com/blog/365661

  1. <html>  
  2. <head>  
  3. <title>TreeView</title>  
  4. <style>  
  5. body{  
  6. margin:0px;  
  7. }  
  8. #dragDiv{position:absolute;display:none;background-color:#3366cc;color:#ffffff;}  
  9. .title{border:0px;font-size:16px;}  
  10. .node{padding-left:20px;overflow:hidden;}  
  11. .icon{display:inline;margin-right:5px;cursor:pointer;}  
  12. </style>  
  13. <script type="text/javascript" language="javascript">  
  14. /  
  15. Simple tree with "drag and drop".  
  16. Author:rains31@gmail.com  
  17. /  
  18. var Tree;  
  19. function pageonload()  
  20. {  
  21. Tree = new TreeView('TreeRoot');  
  22. Tree.addNode('TreeRoot','test0','test0','test0');  
  23. for(i=1;i<100;i++)  
  24. {  
  25.    Tree.addNode('test'+Math.floor(Math.random()*i),'test'+i,'test'+i,'test'+i);  
  26. }  
  27. document.onmousedown = Tree.DragStart;  
  28. document.onmouseup = Tree.DragStop;  
  29. document.onmousemove = Tree.Draging;  
  30. }  
  31. //check if node1 is a offspring of node2  
  32. //判断node1是否是node2的后代  
  33. isOffspring=function(node1,node2)  
  34. {  
  35. while(node1!=null && node1!=node2)  
  36. {  
  37.    node1node1 = node1.parentNode;  
  38. }  
  39.   
  40. return node1==node2;  
  41. }  
  42. window.onload = pageonload;  
  43.   
  44. TreeView = function(Root)  
  45. {  
  46. this.root = document.getElementById(Root);  
  47. this.lastObj = null;  
  48. this.oSelected = null;  
  49. if(this.root == null)  
  50. {  
  51.    alert('Invalid tree root!');  
  52.    return false;  
  53. }  
  54.   
  55. //每个nodeId必须是唯一的合法的html元素Id，且不能以title,icon,child之类的结尾  
  56. this.addNode = function(parentId,nodeId,nodeName,link)  
  57. {  
  58.    var oParent = document.getElementById(parentId);  
  59.    //父节点合法不？  
  60.    if(oParent == null) return;  
  61.    var oNode = document.createElement('div');  
  62.    oNode.id = nodeId;  
  63.    oNode.className = 'node';  
  64.    //真够费劲的  
  65.    oNode.innerHTML = "<div id='"+nodeId+"_title' class='title'><span class='icon' onclick='Tree.fold(this)'>-</span>"+nodeName+"</div>";  
  66.    oParent.appendChild(oNode);  
  67. }  
  68. this.DragStart = function(e)  
  69. {  
  70.    ee = e || window.event;  
  71.    this.DragObj = e.target || e.srcElement;  
  72.    //是否是合法的节点？  
  73.    if(this.DragObj.className != 'title')return;  
  74.    if(this.oSelected !=null)  
  75.    {  
  76.     this.oSelected.style.backgroundColor = '';  
  77.    }  
  78.    this.tmpNode = document.getElementById('dragDiv');  
  79.    thisthis.tmpNode.innerHTML = this.DragObj.lastChild.nodeValue;  
  80.    thisthis.DragObj = this.DragObj.parentNode;  
  81.    //debug('drag start:'+this.DragObj.id+':'+this.DragObj.className);  
  82.    this.indrag = true;  
  83.    this.x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));  
  84.       this.y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));  
  85.    this.left = parseInt(this.tmpNode.offsetLeft);  
  86.    this.top = parseInt(this.tmpNode.offsetTop);  
  87.    //这里一定要return false啊，否则，嘿嘿，我不告诉你，你可以拖拖看。  
  88.    return false;  
  89. }  
  90.   
  91. this.DragStop = function(e)  
  92. {  
  93.    if(!this.indrag)return;  
  94.    this.indrag = false;  
  95.    this.tmpNode.style.display = 'none';  
  96.    ee = e || window.event;  
  97.    var target = e.target || e.srcElement;  
  98.    if(target.className != 'title')return;  
  99.    var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));  
  100.       var y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));  
  101.   
  102.     //鼠标没移动位置,选择当前节点。  
  103.    if(this.x == x && this.y == y)  
  104.    {  
  105.     this.oSelected = target;  
  106.     this.oSelected.style.backgroundColor = '#00ffff';  
  107.     return false;  
  108.    }  
  109.    try{  
  110.     if(isOffspring(target.parentNode,this.DragObj))  
  111.     {  
  112.      alert('Cannot drag to child node.');  
  113.      return;  
  114.     }  
  115.     target.parentNode.appendChild(this.DragObj);  
  116.     debug('drag:'+this.DragObj.id+'->'+target.parentNode.id)  
  117.    }  
  118.    catch(e)  
  119.    {  
  120.     alert('error!');  
  121.    }  
  122.    return true;  
  123. }  
  124. this.Draging = function(e)  
  125. {  
  126.    if(!this.indrag)return;  
  127.    ee = e || window.event;  
  128.    var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));  
  129.       var y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));  
  130.    this.tmpNode.style.left = x+2+'px';  
  131.    this.tmpNode.style.top = y+2+'px';  
    132. <li style="font-size: 1em; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 38px; padding


    >> 留言评论