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

Katerina23 · February 8, 2018

У меня есть несколько объектов которые можно переместить с помощью мышкой. Как сделать так, чтобы при перемещении объект оказывался поверх остальных. В 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>

WeboМан · April 15, 2019

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

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

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

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

Sign In

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

Question

Katerina23

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

WeboМан

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information