Как установить каждый div в c координаты jquery

Question

У меня есть пользовательский интерфейс с элементами div, и я хочу установить для этого объекта div некоторые координаты.

На данный момент я не могу найти какой-либо метод, как отбирать объекты по кординатам, но у меня есть объекты div.

Я хочу поставить эти ящики для кординаций, какое решение для ставок сделать это?

Например: lpms3-box установить для кординат 10, 50

.lpms3-box {
  background-color: #fff;
  width: 150px;
  height: 90px;
  border-radius: 5px;
  margin: 10px;
}

.machine-icon {
  float: left;
  width: 50px;
  height: 90px;
}

.machine-icon>img {
  width: 50px;
  height: 50px;
  margin-top: 40%;
}

.title-box {
  float: right;
  margin-right: 12%;
}

<div class="lpms3-box">
  <div class="machine-icon">
    <img src="https://www.creativefabrica.com/wp-content/uploads/2019/02/Coffee-Machine-icon-by-masbay02-580x435.png" />
  </div>
  <div class="title-box">Some title</div>
  <div class="desc-box">Some description</div>
</div>
<div class="lpms3-box">
  <div class="machine-icon">
    <img src="https://www.creativefabrica.com/wp-content/uploads/2019/02/Coffee-Machine-icon-by-masbay02-580x435.png" />
  </div>
  <div class="title-box">Some title</div>
  <div class="desc-box">Some description</div>
</div>
<div class="lpms3-box">
  <div class="machine-icon">
    <img src="https://www.creativefabrica.com/wp-content/uploads/2019/02/Coffee-Machine-icon-by-masbay02-580x435.png" />
  </div>
  <div class="title-box">Some title</div>
  <div class="desc-box">Some description</div>
</div>
<div class="lpms3-box">
  <div class="machine-icon">
    <img src="https://www.creativefabrica.com/wp-content/uploads/2019/02/Coffee-Machine-icon-by-masbay02-580x435.png" />
  </div>
  <div class="title-box">Some title</div>
  <div class="desc-box">Some description</div>
</div>
<div class="lpms3-box">
  <div class="machine-icon">
    <img src="https://www.creativefabrica.com/wp-content/uploads/2019/02/Coffee-Machine-icon-by-masbay02-580x435.png" />
  </div>
  <div class="title-box">Some title</div>
  <div class="desc-box">Some description</div>
</div>

Answer 1

<div id="lpms3-box-1" class="lpms3-box">
    ...
</div>
<div id="lpms3-box-2" class="lpms3-box">
    ...
</div>
<div id="lpms3-box-3" class="lpms3-box">
    ...
</div>

.lpms3-box {
    ...
    display: fixed;
}


#lpms3-box-1 {
   top: 10px;
   left: 50px;
}
#lpms3-box-2 {
   top: 400px;
   left: 250px;
}
#lpms3-box-3 {
   top: 600px;
   left: 50px;
}

или через Js

Array.from(document.querySelectorAll(".lpms3-box")).forEach(el => {
   switch (el.getAttribute("id")) {
       case "lpms3-box-1":
           el.style.top = "10px";
           el.style.left = "50px";
           break;
       case "lpms3-box-2":
           ...
   }
});

Answer 2

Вы можете установить отображение на fixed на требуемом элементе div, затем вы можете установить верхний и левый свойства.

.lpms3-box {
    ...
    display: fixed;
}

function moveElement(x, y) {
    $(".lpms3-box").css({
        left: x,
        top: y
    });
}

РЕДАКТИРОВАТЬ: Если вы хотите, чтобы ваш div был относительно него родитель, используйте absolute дисплей внутри relative родителя.