Question

我正在创建一个应用程序，您可以在其中设计带有图像的地图，然后将其保存到数据库中，然后让数据库在另一个窗口中重新创建地图。通过将图像的顶部和左侧位置保存到屏幕上来完成此操作。对我来说不幸的是，顶部和左侧位置变化很大。

我在所有附加内容都应该出现的页面（#draggable）上指定了一个空的div。我希望添加到页面约束框中的每个图像最初都显示在左上角（然后用户可以将其拖动到周围）。即使我将对象的CSS设置为：0px和top：0px，它仍然会将图像放在最后一个图像旁边（左侧：0px和top：0px），或者如果用户拖动了图像，它仍然会从左上角偏移，好像那里还有一张图片。

一个连续放置的演示（所有图像，除了明显拖曳的图像，在检查时显示为：左：0px顶：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会破坏流程，当附加到目标时，CSS似乎会彼此叠置，而不是并排放置。

希望有帮助。

如何每次都附加到div中的相同位置？

1 个答案: