Как установить глубину перемещаемого объекта, чтобы при захвате мышкой и перетаскивания он был поверх остальных объектов (в случае если он будет соприкасаться с другими объектами). Вот например во flash используется функция setChildIndex и swapChildren который меняет глубину объектов. Я знаю, что глубина в html5 задается во время прорисовки объекта, т.е. выбранный мышкой объект нужно рисовать последним, а все остальные первыми. Теоретически это понятно как это сделать, а вот на практики не получается?
Вот код:
Код
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Move</title>
</head>
<body>
<script>
var canvas, ctx, num = 0;
var box=[];
var dragok = false;
var startX;
var startY;
var offsetX = 10;
var offsetY = 10;
function main()
{
canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
canvas.width = 300;
canvas.height = 300;
canvas.style.background = "#444444";
document.body.appendChild(canvas);
box.push({x:30,y:100,width:30,height:30,fill:"#4CFF00",isDragging:false});
box.push({x:70,y:100,width:30,height:30,fill:"#ff550d",isDragging:false});
box.push({x:110,y:100,width:30,height:30,fill:"#FFE347",isDragging:false});
box.push({x:150,y:100,width:30,height:30,fill:"#23FFCB",isDragging:false});
draw();
canvas.onmousedown = myDown;
canvas.onmouseup = myUp;
canvas.onmousemove = myMove;
}
function myMove(e){
if (dragok)
{
var mx=parseInt(e.clientX-offsetX);
var my=parseInt(e.clientY-offsetY);
var dx=mx-startX;
var dy=my-startY;
for(var i=0;i<box.length;i++)
{
if(box[i].isDragging==true)
{
box[i].x+=dx;
box[i].y+=dy;
}
}
draw();
startX=mx;
startY=my;
}
}
function myUp(e)
{
dragok = false;
for(var i=0;i<box.length;i++){
box[i].isDragging=false;
}
}
function myDown(e){
var mx=parseInt(e.clientX-offsetX);
var my=parseInt(e.clientY-offsetY);
dragok=true;
for(var i=0;i<box.length;i++){
if(mx>box[i].x && mx<box[i].x+box[i].width && my>box[i].y && my<box[i].y+box[i].height)
{
box[i].isDragging=true;
}
}
startX=mx;
startY=my;
}
function rect(r)
{
ctx.fillStyle=r.fill;
ctx.fillRect(r.x,r.y,r.width,r.height);
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for(var i=0;i<box.length;i++)
{
rect(box[i]);
}
}
main();
</script>
</body>
</html>
