Как сделать так что бы div не накладывались друг на друга при перемещении?

Question

[![Пример][1]][1] Div можно двигать мышью, координаты вычисляются через X Y и элементу применяются события mousemove, но нужно что бы они не накладывались друг на друга, как это реализовать ? [1]: https://i.stack.imgur.com/soI2n.png

let allbox = document.querySelectorAll('div.box');
// let box1 = document.getElementById("1");


function randomSize(box) {
  //задаем случайные размеры
  const getRandomSize = () => Math.floor(Math.random() * 100 + 10) + 'px';
  box.style.width = getRandomSize();
  box.style.height = getRandomSize();
  //функция для вычисления движения
  let listener = function(e) {
    box.style.left = e.pageX + "px";
    box.style.top = e.pageY + "px";
  };
  //накидываем события на div
  box.addEventListener('mousedown', e => {
    document.addEventListener('mousemove', listener);

  });
  box.addEventListener('mouseup', e => {
    document.removeEventListener('mousemove', listener);
  });
}

for (let index = 0; index < allbox.length; index++) {
  const element = allbox[index];
  randomSize(element)
}

.wrapper {
  position: relative;
  height: 400px;
  border: 1px solid red;
}

.wrapper .box {
  border: 1px solid black;
}

.wrapper .box:nth-child(1) {
  position: absolute;
  background-color: #312d57;
  -webkit-box-shadow: 23px -4px 15px -13px rgba(34, 60, 80, 0.2);
  -moz-box-shadow: 23px -4px 15px -13px rgba(34, 60, 80, 0.2);
  box-shadow: 23px -4px 15px -13px rgba(34, 60, 80, 0.2);
}

.wrapper .box:nth-child(2) {
  position: absolute;
  background-color: #562d57;
  -webkit-box-shadow: -29px -4px 15px -13px rgba(34, 60, 80, 0.2);
  -moz-box-shadow: -29px -4px 15px -13px rgba(34, 60, 80, 0.2);
  box-shadow: -29px -4px 15px -13px rgba(34, 60, 80, 0.2);
}

.wrapper .box:nth-child(3) {
  position: absolute;
  background-color: #572d2d;
  -webkit-box-shadow: -9px 25px 15px -13px rgba(34, 60, 80, 0.2);
  -moz-box-shadow: -9px 25px 15px -13px rgba(34, 60, 80, 0.2);
  box-shadow: -9px 25px 15px -13px rgba(34, 60, 80, 0.2);
}

.wrapper .box:nth-child(4) {
  position: absolute;
  background-color: #2d5739;
  -webkit-box-shadow: -9px -20px 15px -13px rgba(34, 60, 80, 0.2);
  -moz-box-shadow: -9px -20px 15px -13px rgba(34, 60, 80, 0.2);
  box-shadow: -9px -20px 15px -13px rgba(34, 60, 80, 0.2);
}

.wrapper .box:nth-child(5) {
  position: absolute;
  background-color: #56572d;
  -webkit-box-shadow: -9px -14px 15px 4px rgba(34, 60, 80, 0.2);
  -moz-box-shadow: -9px -14px 15px 4px rgba(34, 60, 80, 0.2);
  box-shadow: -9px -14px 15px 4px rgba(34, 60, 80, 0.2);
}

<div class="wrapper">
  <div id=1 class="box"></div>

  <div id=2 class="box"></div>

  <div id=3 class="box"></div>

  <div id=4 class="box"></div>

  <div id=5 class="box"></div>

</div>

Answer 1

Это невозможно, не совсем понятно чего вы хотите от этого, они по любому будут накладываться. но можно определить какой div будет накладываться на какого через z-index, а если надо чтобы они как лего собирались, то это уже математика. Top будет вершиной div'a который следит за курсором а left это ширина, и прибавить их к существующим значениям... Бр, нужно посидеть и попотеть чтобы это реализовать

БЛОГ НА HUSL

Как сделать так что бы div не накладывались друг на друга при перемещении?

Ответы (1 шт):