Question

我正在尝试创建一种地图构建器，用户可以从中选择预定义的对象列表，然后单击其中的一个，它将显示在带有方向选项（拖动，旋转，调整大小）的框架内。 / p>

我不明白如何向页面运行时未定义的对象添加功能。

我发现了很多很好的示例，这些示例演示了如何使用Jquery UI以及如何在屏幕上单击时添加图像，但从未见过两者结为一体。

这是添加点击功能的一个很好的例子：Add image to page onclick

（有关点击示例的信息很多）

这是链接（来自tjarratt）中我喜欢的代码，因此，如果有人可以帮助我从这里分支，那将是最简单的。

<html>
<head>
<script type="text/javascript">
        function addimage() { 
          var img = document.createElement("img");
          img.src = "http://bricksplayground.webs.com/brick.PNG"; 
          img.height = 50; 
          img.width = 100;

          //optionally set a css class on the image
          var class_name = "foo";
          img.setAttribute("class", class_name);

          document.body.appendChild(img);
        }
</script>
</head>
<body>
    <button onclick="addimage();">Click</button>
</body>
</html>

Answer 1

以下是一个可以帮助您的示例。考虑下面的代码。

$(function() {
  function addImage(u, c, t) {
    /***
    Input: URL, Class, Target 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");
    }
    var img = $("<img>", {
      src: u,
      class: c,
    }).css({
      width: "50px",
      height: "100px"
    });
    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;
}

<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>

单击“添加对象”时，将创建具有特定属性的Image元素。我添加了一些默认值，因此，如果您调用addImage()，它将仍然添加图像。您还可以指定自己的URL，类和目标对象。

希望这会有所帮助。

单击即可将图像添加到屏幕上，并使其可拖动/旋转

1 个答案: