Panowie mam problem i nie wiem jak go rozwiazac mam nadzieje ze cos podpowiecie:
Mam kontener:
<div id="myCanvas" style="position:relative;height:250px;width:100%;"></div>
i rysuje na nim rectangle:
function drawRectangle(x,y,width,height){
var length = $('#myCanvas').children('div').length;
$('#myCanvas').append('<div class="rectangle'+length+'" style="border: 3px solid red; top:'+y+'; left:'+x+';position:absolute;"></div>');
}
var x;
var y;
var width;
var height;
var mouseDownX;
var mouseDownY;
$('#myCanvas').on('mousedown', function(e){
var offset = $("#myCanvas").offset();
mouseDownX = e.pageX - offset.left;
mouseDownY = e.pageY - offset.top;
$(this).on('mousemove', function(e){
var offset = $("#myCanvas").offset();
var upX = e.pageX - offset.left;
var upY = e.pageY - offset.top;
var width = upX - mouseDownX;
var height = upY - mouseDownY;
var length = $('#myCanvas').children('div').length;
$('.rectangle').css({
width: width,
height: height
});
});
drawRectangle(mouseDownX, mouseDownY);
});
$('#myCanvas').on('mouseup', function(e){
$('#myCanvas').unbind('mousemove');
});
Nie wiem jak rozwiazac aby dodanie css dotyczylo aktualnie rysowanego rectangla jakies pomysly?