导航栏： 首页 评论列表

可拖动DOM模型2

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

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

<

ol start="100" class="dp-xml" style="font-size:1em;line-height:1.4em;margin-top:0px;margin-right:0px;margin-bottom:1px;margin-left:0px;padding-top:2px;padding-right:0px;padding-bottom:2px;padding-left:0px;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:rgb(209, 215, 220);border-right-color:rgb(209, 215, 220);border-bottom-color:rgb(209, 215, 220);border-left-color:rgb(209, 215, 220);list-style-type:decimal;list-style-position:outside;list-style-image:initial;background-color:rgb(255, 255, 255);color:rgb(43, 145, 175);">

  • <html>  
  • <head>  
  • <title>TreeView</title>  
  • <style>  
  • body{  
  • margin:0px;  
  • }  
  • #dragDiv{position:absolute;display:none;background-color:#3366cc;color:#ffffff;}  
  • .title{border:0px;font-size:16px;}  
  • .node{padding-left:20px;overflow:hidden;}  
  • .icon{display:inline;margin-right:5px;cursor:pointer;}  
  • </style>  
  • <script type="text/javascript" language="javascript">  
  • /  
  • Simple tree with "drag and drop".  
  • Author:rains31@gmail.com  
  • /  
  • var Tree;  
  • function page_onload()  
  • {  
  • Tree = new TreeView('TreeRoot');  
  • Tree.addNode('TreeRoot','test_0','test_0','test_0');  
  • for(i=1;i<100;i++)  
  • {  
  •    Tree.addNode('test_'+Math.floor(Math.random()*i),'test_'+i,'test_'+i,'test_'+i);  
  • }  
  • document.onmousedown = Tree.DragStart;  
  • document.onmouseup = Tree.DragStop;  
  • document.onmousemove = Tree.Draging;  
  • }  
  • //check if node1 is a offspring of node2  
  • //判断node1是否是node2的后代  
  • isOffspring=function(node1,node2)  
  • {  
  • while(node1!=null && node1!=node2)  
  • {  
  •    node1node1 = node1.parentNode;  
  • }  
  •   
  • return node1==node2;  
  • }  
  • window.onload = page_onload;  
  •   
  • TreeView = function(Root)  
  • {  
  • this.root = document.getElementById(Root);  
  • this.lastObj = null;  
  • this.oSelected = null;  
  • if(this.root == null)  
  • {  
  •    alert('Invalid tree root!');  
  •    return false;  
  • }  
  •   
  • //每个nodeId必须是唯一的合法的html元素Id，且不能以_title,_icon,_child之类的结尾  
  • this.addNode = function(parentId,nodeId,nodeName,link)  
  • {  
  •    var oParent = document.getElementById(parentId);  
  •    //父节点合法不？  
  •    if(oParent == null) return;  
  •    var oNode = document.createElement('div');  
  •    oNode.id = nodeId;  
  •    oNode.className = 'node';  
  •    //真够费劲的  
  •    oNode.innerHTML = "<div id='"+nodeId+"_title' class='title'><span class='icon' onclick='Tree.fold(this)'>-</span>"+nodeName+"</div>";  
  •    oParent.appendChild(oNode);  
  • }  
  • this.DragStart = function(e)  
  • {  
  •    ee = e || window.event;  
  •    this.DragObj = e.target || e.srcElement;  
  •    //是否是合法的节点？  
  •    if(this.DragObj.className != 'title')return;  
  •    if(this.oSelected !=null)  
  •    {  
  •     this.oSelected.style.backgroundColor = '';  
  •    }  
  •    this.tmpNode = document.getElementById('dragDiv');  
  •    thisthis.tmpNode.innerHTML = this.DragObj.lastChild.nodeValue;  
  •    thisthis.DragObj = this.DragObj.parentNode;  
  •    //debug('drag start:'+this.DragObj.id+':'+this.DragObj.className);  
  •    this.indrag = true;  
  •    this.x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));  
  •       this.y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));  
  •    this.left = parseInt(this.tmpNode.offsetLeft);  
  •    this.top = parseInt(this.tmpNode.offsetTop);  
  •    //这里一定要return false啊，否则，嘿嘿，我不告诉你，你可以拖拖看。  
  •    return false;  
  • }  
  •   
  • this.DragStop = function(e)  
  • {  
  •    if(!this.indrag)return;  
  •    this.indrag = false;  
  •    this.tmpNode.style.display = 'none';  
  •    ee = e || window.event;  
  •    var target = e.target || e.srcElement;  
  •    if(target.className != 'title')return;  
  •    var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));  
  •       var y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));  
  •   
  •     //鼠标没移动位置,选择当前节点。  
  •    if(this.x == x && this.y == y)  
  •    {  
  •     this.oSelected = target;  
  •     this.oSelected.style.backgroundColor = '#00ffff';  
  •     return false;  
  •    }  
  •    try{  
  •     if(isOffspring(target.parentNode,this.DragObj))  
  •     {  
  •      alert('Cannot drag to child node.');  
  •      return;  
  •     }  
  •     target.parentNode.appendChild(this.DragObj);  
  •     debug('drag:'+this.DragObj.id+'->'+target.parentNode.id)  
  •    }  
  •    catch(e)  
  •    {  
  •     alert('error!');  
  •    }  
  •    return true;  
  • }  
  • this.Draging = function(e)  
  • {  
  •    if(!this.indrag)return;  
  •    ee = e || window.event;  
  •    var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));  
  •       var y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));  
  •    this.tmpNode.style.left = x+2+'px';  
  •    this.tmpNode.style.top = y+2+'px';  
    • <li style="font-size: 1em; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 38px; padding


    >> 留言评论