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