Katerina23

Как установить глубину объекта html

Recommended Posts

У меня есть несколько объектов которые можно переместить с помощью мышкой. Как сделать так, чтобы при перемещении объект оказывался поверх остальных. В flash это делается с помощью setChildIndex и swapChildren который меняет глубину объектов. Я знаю что глубина задается во время прорисовки тот объект который рисуется последним отображается поверх всех остальных. Значит при выборе объекта мышкой он должен автоматически прорисовываться последним. Теоретически это понятно, а вот на практике реализовать не получилось. Вот код:

<!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>

 

Share this post


Link to post
Share on other sites

Свойство z-index позволяет веб-мастеру управлять позициями слоёв в глубину экрана, другими словами позволяет указывать браузеру какие элементы следует показывать на переднем плане, а какие на заднем.

Значения свойства z-index:

auto - Элементы накладываются друг на друга в том порядке, каком они указаны в коде HTML. (по умолчанию).

целое число - Чем выше данное значение, тем более высокую позицию занимает элемент по отношению к тем элементам, значение которых ниже.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,235
    Total Members
    3,128
    Most Online
    Drevko
    Newest Member
    Drevko
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.