拖动两条线，为什么效果不同

function move(){
    if (MOVEOBJ == null) { return false; }
    MOVEFLAG = true;
    newX = event.x;
    newY = event.y;
    var arr = new Array();
    try
     {
       arr = MOVEOBJ.Points.value.split(",");
       var pp=arr[0] + ',' + arr[1] + ' ' + (newX) + 'pt,' + (newY) + ' '+ arr[4] + ',' + arr[5];
       MOVEOBJ.outerHTML="<v:PolyLine id='p2' filled='false' Points='"+pp+"' onmousedown='moveIt(this);' style='position:absolute'/> ";
     }
    catch(e){}
}

解决方案 »

  1.   

    <body>
    <v:PolyLine id='pl' filled="false" Points="0,0 100,0 200,0" 
     onmousedown='moveIt(this);' style="position:absolute"/><v:PolyLine id='p2' filled="false" Points="100pt,100pt 200pt,50pt 300pt,100pt"  onmousedown="moveIt(this);" style="position:absolute"/>  
    </body>
      

  2.   

    polyline是以第一个point为坐标原点画线，当第一个点的绝对坐标(相对于文档的坐标)不是(0,0)时，呈现出来的位置坐标是相对坐标+你的设置值。比如你设置points.value="100,50 200,200",设置后你可以通过alert(point.value)获取到它的绝对坐标是(200,100 300,250)
      

  3.   

    也就是说如果我第一个点的值发生了改变，后面的两个点在页面上显示的位置应该为该点的值加上第一个点的值。
    现在比如说我拖动一个L字型的折线，我要做的是，向左拖动折线，最右边的点在页面上显示的位置不变。则需要改动的不止是第一个点以及第二个点的坐标，同时还要改动第三个（最右边）点的坐标，是这样的吗？我现在只想改动Points属性，像上面的重新画该直线很困难。有其它的方法只修改Points吗？
      

  4.   

    也就是当第一个point不为坐标原点时，我把后面的每个点得到坐标都减去第一个点的坐标这样在页面上显示的位置就是Points.value中设置的值了我试着做了一下，还没成功
      

  5.   

    <html xmlns:v>
    <head>
    <style>
    v\:*{behavior:url(#default#VML);}
    </style>
    <script language="javascript">
    var MOVEOBJ = null;
    var MOVEFLAG = false;
    var Po=null;
    function moveIt(obj,p){
        document.onmousemove = move;
        document.onmouseup = drop;
    Po=p;
        MOVEOBJ = obj; 
        return true;
    }function move(){
        if (MOVEOBJ == null) { return false; }
        MOVEFLAG = true;
        newX = event.x;
        newY = event.y;
    MOVEOBJ.Points.value =  Po[0]+','+Po[1] +','+ newX + ',' + newY +','+ Po[4]+','+Po[5];
        event.returnValue = false;    
        return false;
    }function drop(){
        if(MOVEFLAG) MOVEFLAG = false;
        MOVEOBJ = null;
        return true;
    }function getPoints(obj)
    {
    return obj.points.value.split(",");
    }</script>
    </head>
    <body onmousemove="window.status = 'X=' +  window.event.x + ' Y='+ window.event.y" >
    <v:PolyLine id='pl' filled="false" Points="0,0,100,0,200,0" 
     onmousedown='moveIt(this,getPoints(this));' style="position:absolute"/>
    <v:PolyLine id='p2' filled="false" Points="50,50,100,50,200,100" 
     onmousedown='moveIt(this,getPoints(this));' style="position:absolute"/>  
    </body>
    </html>
      

  6.   

    有点BUG，修改了一下<html xmlns:v>
    <head>
    <style>
    v\:*{behavior:url(#default#VML);}
    </style><script language="javascript">
    var MOVEOBJ = null;
    var MOVEFLAG = false;
    var Po=null;
    var Poid=null;
    function moveIt(obj){
        document.onmousemove = move;
        document.onmouseup = drop;
    Po=getPoints(obj);
    Poid=obj.id;
        MOVEOBJ = obj; 
        return true;
    }function move(){
        if (MOVEOBJ == null) { return false; }
        MOVEFLAG = true;
        newX = event.x;
        newY = event.y;
    MOVEOBJ.Points.value =  Po[0]+','+Po[1] +','+ newX + ',' + newY +','+ Po[4]+','+Po[5];
        event.returnValue = false;    
        return false;
    }function drop(){
        if(MOVEFLAG) MOVEFLAG = false;
        MOVEOBJ = null;
        return true;
    }function getPoints(obj)
    {
    if(Po!=null&&Poid==obj.id)return Po;
    return obj.points.value.split(",");
    }</script>
    </head>
    <body onmousemove="window.status = 'X=' +  window.event.x + ' Y='+ window.event.y" >
    <v:PolyLine id='pl' filled="false" Points="0,0,100,0,200,0" 
     onmousedown='moveIt(this);' style="position:absolute;top:10px;left:10px;"/>
    <v:PolyLine id='p2' filled="false" Points="50,50,100,50,200,100" 
     onmousedown='moveIt(this);' style="position:absolute;top:10px;left:10px;"/>  
    </body>
    </html>