線條SVG動態

我試圖在移動對象時重畫線條。線條SVG動態

我已經有點x和y的開始和結束的行（x1，y1，x2，y2），但我不能在拖動事件重畫線。

下面是代碼和鏈接的jsfiddle：

https://jsfiddle.net/rafaelcb21/vtga3119/2/

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script> 
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<style> 
    body { 
     padding:0px; 
     margin:0px; 
     width: 3300px; 
     height: 5000px 
    } 

    svg { 
     position:absolute; 
     width:100%; 
     height:100%; 
     top:0px; 
     z-index:-1; 
    } 

    .table { 
     position:absolute; 
     cursor:pointer; 
     border-top: solid 1px; 
    } 

    .table.node2 { 
     left: 353px; 
     top: 383px; 
    } 

    .td {   
     padding-top: 0px; 
     padding-bottom: 0px; 
     padding-left: 7px; 
     padding-right: 7px; 
     border-style: solid; 
     border-top-width: 0px; 
     border-bottom-width: 1px; 
     border-left-width: 1px; 
     border-right-width: 1px; 
     } 
</style> 
</head> 
<body> 
<div class='table node1'> 
    <div class='td' id='Table_1'>Table_1</div> 
    <div class='td' id='test_11'>test_1</div> 
    <div class='td' id='test_12'>test_2</div> 
    <div class='td' id='test_13'>test_3</div> 
    <div class='td' id='test_14'>test_4</div> 
</div> 

<div class='table node2'> 
    <div class='td' id='Table_2'>Table_2</div> 
    <div class='td' id='test_21'>test_1</div> 
    <div class='td' id='test_22'>test_2</div> 
</div> 

<svg> 
    <line id='test_13_test_21' style='stroke:rgb(255,0,0)'></line> 
</svg> 

<script> 
    $(".node1").draggable(
     { 
      drag: function(){ 
       //OUT 
       var test_13= $("#test_13"); 
       var test_13_position = test_13.offset(); 
       test_13_position_top_y = test_13_position.top + 9 
       test_13_position_left_x = test_13_position.left + test_13.width() + 15; 
     } 
    }); 

    $(".node2").draggable(
     { 
      drag: function(){ 
       //IN 
       var test_21= $("#test_21"); 
       var test_21_position = test_21.offset(); 
       test_21_position_top_y = test_21_position.top + 9 
       test_21_position_left_x = test_21_position.left + 1; 
     } 
    }); 

    //OUT 
    var test_13= $("#test_13"); 
    var test_13_position = test_13.offset(); 
    test_13_position_top_y = test_13_position.top + 9 
    test_13_position_left_x = test_13_position.left + test_13.width() + 15; 

    //IN 
    var test_21= $("#test_21"); 
    var test_21_position = test_21.offset(); 
    test_21_position_top_y = test_21_position.top + 9 
    test_21_position_left_x = test_21_position.left + 1; 

    //LINE 
    $('#test_13_test_21').attr({ 
     'x1': test_13_position_left_x, 
     'y1': test_13_position_top_y, 
     'x2': test_21_position_left_x, 
     'y2': test_21_position_top_y 
    }); 
</script> 
</body> 
</html>

來源

2016-03-12 rafaelcb21

這裏你計算行的新座標而不是將它們分配給線元素的x1,y1,x2,y2屬性。嘗試更新的fiddle

在節點1拖事件中使用$('#test_13_test_21').attr({x1:test_13_position_left_x,y1:test_13_position_top_y})

和節點2 $('#test_13_test_21').attr({x2:test_21_position_left_x,y2:test_21_position_top_y})

來源

2016-03-12 17:10:04

謝謝帕Teja的非常完美！ – rafaelcb21

@ rafaelcb21很高興幫助你 –

回答

相關問題