Jump to content
  • Sign Up
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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Member Statistics

    46,897
    Total Members
    1,451
    Most Online
    Neovo
    Newest Member
    Neovo
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Дорогие Друзья! Рад вам сообщить о выходе новой версии движка Flextype 0.9.9! В Flextype 0.9.9 достаточно много важных изменений определяющих — то как будет выглядеть финальная версия Flextype 1.0.0, к которой я иду уже более двух лет! Были пересмотрены, обновлены и переписаны ключевые моменты ядра, ответственные за работу с Записями, Коллекциями, Кешем и Rest API. Подробнее в статье: https://vk.com/@flextype-flextype-099-reliz Большое спасибо всем за то, что вы являетесь частью сообщества Flextype!
    • Привет! Меня зовут Евгения и я ищу талантливых программистов в компанию DevCube. https://mydevcube.com/ Это международная компания, которая занимается DevOps, web и software разработками. На данный момент в команду требуются Full stack .NET (Junior & Senior) — 3+ year of commercial experience; — Strong knowledge of Angular 5+; — Strong knowledge of Typescript; — Experience with HTML/HTML5, CSS/CSS3, SCSS; — Good understanding of Git; — Conversational English. Будет плюсом: VB experience Условия: Удаленная работа full-time Зарплата от 10-20$/час по результатам собеседования. Обязательное условие - быть на связи до 21-22:00 по Москве. Для отклика прошу писать на почту: evgeniia.ko@mydevcube.com
    • Привет! Меня зовут Евгения и я ищу талантливых программистов в компанию DevCube. https://mydevcube.com/ Это международная компания, которая занимается DevOps, web и software development. На данный момент в команду требуются PHP developers (Junior & Senior) Requirements: — 3+ year of commercial experience; — Strong knowledge PHP 7+ — Framework knowledge — Conversational English — CSS, Json, HTML5 Будет плюсом: Shopify implementation expertise. Условия: Удаленная работа full-time Зарплата от 10-20$/час по результатам собеседования. Обязательное условие - быть на связи до 21-22:00 по Москве. Для отклика прошу писать на почту: evgeniia.ko@mydevcube.com
  • Popular Contributors

    Nobody has received reputation this week.

×
×
  • Create New...