Как добавить в то же место в div каждый раз?

Question

Я создаю приложение, в котором вы можете создать карту с изображениями, затем сохранить ее в базе данных, а затем заново создать карту в другом окне.Это достигается путем сохранения верхнего и левого местоположений изображений, добавляемых на экран.К сожалению для меня, верхняя и левая позиции сильно различаются.

Я обозначил пустой div на странице (#draggable), где должны происходить все добавления.Я хочу, чтобы каждое изображение, добавляемое в ограниченное поле на странице, первоначально отображалось в верхнем левом углу (пользователь может затем перетаскивать его).Даже если я применю CSS к объекту слева: 0px и top: 0px, он все равно поместит изображение рядом с последним изображением (слева: 0px и top: 0px) или, если пользователь перетащил изображение, онобудет смещен от левого верхнего угла, как если бы там было изображение.

Демонстрация последовательного размещения (все изображения, за исключением явно перетаскиваемой, показывают слева: 0px top: 0px при проверке): https://res.cloudinary.com/the-un-division-network/image/upload/v1555475857/Placement_example.png

У меня также есть функция замены изображения, которая, основываясь на результатах формы, заменит изображение другим цветом.Когда эти изображения добавляются, они ужасно отклоняются примерно на 240 пикселей вправо и на 120 пикселей вниз, и каждое последующее изменение формы добавляет эту сумму к следующему добавлению:

Демонстрация результатов замены изображения (у меня нет+10 повторений за изображения, извините: https://res.cloudinary.com/the-un-division-network/image/upload/v1555476283/Image_Replacement_Example.png

Мне кажется, что это должен быть стиль отображения или позиции, но все, что я пробовал, потерпело неудачу.

Вот моя отредактированная версияизящного кода из twisty , который добавляет изображения в div id = draggable

function addImage(u, c, t, left, top) {

                if (u == undefined) {
                    u = "https://res.cloudinary.com/the-un-division-network/image/upload/v1553678772/MainProject/Home.png";
                }
                if (c == undefined) {
                    c == "";
                }
                if (t == undefined) {
                    t = $("#draggable");
                }
                var img = $("<img>", {
                    src: u,
                    class: c,
                }).css({
                    "left" : left + "px",
                    "top" : top + "px",

                });
                img.appendTo(t);

                return img;
            }

А затем функция make-drag делает изображение перетаскиваемым

function makeDrag(o) {

                o.draggable({
                    containment: "parent",
                    snap: true
                });

            }

А вот фрагмент, который заменяет изображение (удаляет, а затем добавляет новое изображение в том же месте, используя position.left и position.top)

function applyImgCSS(value) {

                var picture = $("#draggable img:last-child");
                var position = picture.position();

                $("#draggable img:last-child").remove();
                if (document.getElementById("saleStatusID").value == "") {

                    switch (value) {
                        case "Empty Lot":
                            {
                                makeDrag(addImage('https://res.cloudinary.com/the-un-division-network/image/upload/v1555457254/MainProject/House-Empty_Lot.png', undefined, undefined, position.left, position.top));
                                break;
                            }
                            //And many more switch statements...

Position.top и position.leftнасколько я понимаю, не даст желаемых результатов, которые я хочу, независимо от того, но это все еще не решает исходную проблему смещения.

Открыт для любых предложений, спасибо.

Answer 1

Рассмотрим оригинальный код.Если мы изменим addImage(), чтобы включить position, мы можем добавить это в CSS.Зона отбрасывания должна иметь position: relative, чтобы мы могли устанавливать абсолютные позиции внутри нее относительно ее блочной модели.

$(function() {
  function addImage(u, c, t, p) {
    /***
    Input: URL, Class, Target Object, Position Object
    Output: jQuery Object of IMG element
    ***/
    if (u == undefined) {
      u = "https://bricksplayground.webs.com/brick.PNG";
    }
    if (c == undefined) {
      c == "";
    }
    if (t == undefined) {
      t = $("#zone");
    }
    if (p == undefined) {
      p = {
        left: 0,
        top: 0
      };
    }
    var img = $("<img>", {
      src: u,
      class: c,
    }).css({
      width: "50px",
      height: "100px",
      position: "absolute",
      left: p.left + "px",
      top: p.top + "px"
    });
    img.appendTo(t);
    return img;
  }

  function makeDrag(o) {
    /***
    Input: jQuery Object
    Output: null
    ***/
    o.draggable({
      containment: "parent"
    });
  }

  $("#add-object").click(function() {
    makeDrag(addImage("https://png.pngtree.com/png_detail/20181008/red-brick-wall-png-clipart_1564742.png", "foo"));
  });
});

#zone {
  width: 300px;
  height: 200px;
  position: relative;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button id="add-object">Add Object</button>
<div id="zone"></div>

Это позволит принять объект:

{
  top: 0,
  left: 0
}

Так, например, вы можете использовать следующее:

addImage("https://bricksplayground.webs.com/brick.PNG", "brick", $("#zone"), {top: 10, left: 10});

Это создаст изображение в этом точном положении каждый раз.CSS будет нарушать поток, и они будут казаться друг на друга, а не рядом друг с другом при добавлении к цели.

Надеюсь, что помогает.