[CrazyBite]

Всем привет! Помогите разобраться.. Немного не понимаю логики... почему не меняются координаты при перетаскивании таблицы?
в консоль выводит состояние позиций нужных мне элементов:

<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/jquery-ui.js"></script>
<style>
	th{background-color:silver;}
	table td, th{border:1px solid black;padding:3 3;}
	table{border-collapse:collapse;background-color:white;}			
	.norborder{border-right:none;}
	.nolborder{border-left:none;}
	.db_table{cursor:pointer;}	
	#new-link-line {
		position: absolute;
		width: 3px;
		background-color: #06a;
		z-index: 100;
		-webkit-transform-origin: top left;
		-moz-transform-origin: top left;
		-o-transform-origin: top left;
		-ms-transform-origin: top left;
		transform-origin: top left;
	}	
</style>

<?
include("include/functions.php");


function make_tab($name,$array_tabs){
	$count = count($array_tabs);
	echo "
	<table class='db_table'>
	<tr>
		<th colspan='2'>$name</th>
	</tr>
	";
	for ($i=0;$i<$count;$i++){
		echo"
		<tr>
			<td class='norborder'>".$array_tabs[$i]."</td>
			<td id='".$array_tabs[$i]."' class='link_td nolborder'></td>
		</tr>";
	}
	echo"</table>";
}
$table_tabs[]='one_row';
$table_tabs[]='two_row';
$table_tabs[]='three_row';
$table_tabs[]='four_row';
$table_tabs[]='five_row';
$table1_tabs[]='one_row1';
$table1_tabs[]='two_row1';
$table1_tabs[]='three_row1';
$table1_tabs[]='four_row1';
$table1_tabs[]='five_row1';


make_tab('test',$table_tabs);
make_tab('test1',$table1_tabs);

?>

<script>
	function createLine(element_1,element_2){
		//x1,y1, x2,y2
		var x1=$(element_1).position().left;
		var y1=$(element_1).position().top;
		var x2=$(element_2).position().left;
		var y2=$(element_2).position().top;
		console.log(x1+":"+y1+" ---> "+x2+":"+y2);
		var linkLine = $('<div id="new-link-line"></div>').appendTo('body');
		linkLine.css('top', y1).css('left', x1);

	}
	function linkDragMoveEvent(x1,y1,x2,y2){
		var length = Math.sqrt((x2 - x1) * (x2 - x1) 
            + (y2 - y1) * (y2 - y1));    
        var angle = 180 / 3.1415 * Math.acos((y2 - y1) / length);
        if(x2 > x1)
            angle *= -1;		
		$('#new-link-line')
			.css('height', length)
			.css('-webkit-transform', 'rotate('+angle+'deg)')
			.css('-moz-transform', 'rotate(' + angle + 'deg)')
            .css('-o-transform', 'rotate(' + angle + 'deg)')
            .css('-ms-transform', 'rotate(' + angle + 'deg)')
            .css('transform', 'rotate(' + angle + 'deg)');
	}
	$(document).ready(function(){
		$('.db_table').draggable();		
		$('.db_table').on( "drag",function(){
			x1=$('#four_row').position().left; //временно
			y1=$('#four_row').position().top;
			x2=$('#four_row1').position().left;
			y2=$('#four_row1').position().top;		
			console.log(x1+":"+y1+"->"+x2+":"+y2);
			//linkDragMoveEvent(x1,y1,x2,y2);
		});
		createLine($("#four_row"),$("#four_row1"));
	});
</script>