蛙蛙推荐：用VML做思维管理工具

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< html  xmlns:v ="urn:schemas-microsoft-com:vml"  xmlns ="http://www.w3.org/1999/xhtml"   >
< head >
  < title > WawaMind beta v1.0 </ title >
</ head >
< style  type ="text/css" >
 v/:*  {  BEHAVIOR :  url(#default#VML)  }
 body  {
 margin-left :  0px ;
 margin-top :  0px ;
 margin-right :  0px ;
 margin-bottom :  0px ;
 cursor : default ;
 width : 1000px ;
}
 .wen {
   padding-top : 3px ;
   padding-left : 3px ;
   padding-bottom : 3px ;
   padding-right : 3px ;
   FONT-SIZE :  9.2pt ;  LINE-HEIGHT :  20px ;
   BACKGROUND-COLOR :  #99ccff ;
   BORDER-BOTTOM :  #330099 1px solid ;  
   BORDER-LEFT :  #330099 1px solid ;  
   BORDER-RIGHT :  #330099 1px solid ;  
   BORDER-TOP :  #330099 1px solid ;   
    /* filter:Alpha(Opacity="80",FinishOpacity="90",Style="0"); */
   cursor : move ;
   z-index : 100 ;
   
}
.editdiv
{
    OVERFLOW :  auto ;  background-color : #fff999 ;  cursor : default ;
    height : 50px ;
}
.editdiv p
{
 margin : 0 ;
}
.expanbutton
{
cursor : hand ;  font-weight : bold ;  font-size : 20px ;
}
</ style >
< script  type ="text/javascript" >
var  xx = 0 ,yy = 0 ,oldvalue = "" ,poly1,zz = 1  
// 有关移动的过程和函数
var  dragapproved = false
var  eventsource,x,y
var  popeventsource = ""
var  Pencil  =   true ;
var  selectObj,selectObjBorder  =   null ;

// 页面双击创建编辑框
function  dbClick() {
     if  (event.srcElement.className != " body " )  return ;
     var  markhtml  = " <div class='wen' style='position:absolute;left: " + window.event.offsetX + " ;top: " + window.event.offsetY + " ;width:150px;z-index:9'></div> " ;
     var  newMark = document.createElement(markhtml);
    document.body.appendChild (newMark);
    newMark.innerHTML  =   " <span class=/ " expanbutton/ "  onclick=/ " expandMemo( this )/ " >-</span><span></span><div class=/ " editdiv/ "  contentEditable=true onselectstart=/ " event.cancelBubble = true / " ></div> " ;
    newMark.fromline  =   new  Array();
    newMark.toline  =   new  Array();
}

// 鼠标按下
function  msDown() {
     if (event.button == 1 ){
         var  isclickScroll =  (event.y  <   0   ||  event.y  >  document.body.clientHeight 
             ||  event.x  <   0   ||  event.x  >  document.body.clientWidth)
         if (selectObj){  // 清空选择
                selectObj.style.borderStyle  =  selectObjBorder;
                selectObj  =   null ;
        }
         if (event.srcElement.className == " wen "   ||
           event.srcElement.tagName  ==   " curve "   ||
           event.srcElement.tagName  ==   " shape "
           )  // 选择要删除的对象
        {
            selectObj  =  event.srcElement;
            selectObjBorder  =  selectObj.style.borderStyle;
            selectObj.style.borderStyle  =   " dotted " ;
            selectObj.style.borderWidth   =   " 1px " ;
            
        }
         if  (event.srcElement.className == " wen " )
        {
             if (event.shiftKey)  // 画两个物体间的线
            {
                eventsource = event.srcElement;
                 return ;
            }
            dragapproved = true   // 拖动物体
            eventsource = event.srcElement
            temp1 = eventsource.style.pixelLeft
            temp2 = eventsource.style.pixelTop
            x = event.clientX
            y = event.clientY
        } else {  // 铅笔
             dragapproved = false ;
              if  (event.srcElement.className != " body "   ||  isclickScroll)   // 防止在物体上画线
             {

                 Pencil  =   false ;
                  return ;
             } 
             Pencil  =   true ;
            document.body.setCapture(); 
            color1 = " red "
            size1 = 1  
            xx = event.offsetX;yy = event.offsetY;zz += 1
            poly1 = document.body.appendChild(document.createElement( " <v:shape filled=false path='m0,0 l0,0' style='position:absolute;z-index: " + zz + " ;left: " + xx + " ;top: " + yy + " ;width:100;height:100' strokecolor=' " + color1 + " ' strokeweight=' " + size1 + " ' coordsize='100,100'/> " )) 
            oldvalue = poly1.path.value.replace( " e " , "" ) 
        }
    }
}
// 鼠标移动
function  msMove() {
     if (event.button == 1 )
    {
         if (event.shiftKey)  // 画两个物体件的线
        {
             return ;
        }
         if (dragapproved){  // 拖动物体
             var  newleft = temp1 + event.clientX - x
             var  newtop = temp2 + event.clientY - y
            eventsource.style.pixelLeft = newleft
            eventsource.style.pixelTop = newtop
            
             // 移动线
             for ( var  i  =   0 ; i <  eventsource.fromline.length;i ++ )
            {
                eventsource.fromline[i].from  =  newleft  + " , " +  newtop;
            }   
             for ( var  i  =   0 ; i <  eventsource.toline.length;i ++ )
            {
                eventsource.toline[i].to  =  newleft  + " , " +  newtop;
            }        
        }
         else   if (selectObj  &&  selectObj.tagName  ==   " curve " )
        {  // 调整曲线
             if ( ! event.altKey)
                selectObj.control1  =  event.x + " , " + event.y;
             else
                selectObj.control2  =  event.x + " , " + event.y;
        }
         else { // 铅笔功能
             if  (event.srcElement.className != " body " )  return ;  // 防止在物体上画线
             if (Pencil)
            {
                oldvalue += " , " + (event.offsetX - xx) + " , " + (event.offsetY - yy);
                poly1.path.value = oldvalue 
                poly1.path.value = poly1.path.value.replace( " ,0, " , " , " ).replace( " ,0 e " , " e " )     
            }
        }        
    }
}
// 鼠标弹起
function  msUp() {
 document.body.releaseCapture(); 
     if  (event.shiftKey  &&  event.srcElement.className == " wen " )  // 画两个物体见的连线。
    {
         var  target  =  event.srcElement;
         var  newline = document.createElement( " <v:curve filled=/ " false / "  from= " + eventsource.style.pixelLeft + " , " + eventsource.style.pixelTop + " / "  to = / "" + target.style.pixelLeft + " , " + target.style.pixelTop + " / " >< / v:curve>");
        document.body.insertBefore(newline);
        eventsource.fromline[eventsource.fromline.length]  =  newline;
        target.toline[target.toline.length]  =  newline;
    }
}
// 控制编辑框的展开和收缩
function  expandMemo(o)
{
     var  expand  =  o.innerText  ==   " + " ;
     var  text  =  o.parentNode.childNodes[ 2 ].innerText;
    o.parentNode.childNodes[ 1 ].innerText  =  expand  ?   "" :text.substring( 0 , 10 );
    o.parentNode.childNodes[ 2 ].style.display  =  expand  ?   ' block ' : ' none ' ;    
    o.innerText  =  expand   ?   " - "  : " + " ;
}
function  keyDown() {
　　 if (event.keyCode  ==   46 )  // 删除
　　{
　　     if (selectObj)
　　    {
　　       document.body.removeChild(selectObj);
　　       selectObj  =   null ;
　　    }
　　}
}
document.onkeydown  =  keyDown 
</ script >
< body  class ="body"   ondblclick ="dbClick()"  onmousedown ="msDown()"  onmousemove ="msMove()"  onmouseup ="msUp()"  onselectstart ="return false;" >
</ body >
</ html >