单击时将图像添加到屏幕并允许其可拖动/可旋转答案

【问题标题】：Add image to screen on-click and allow it to be draggable/rotatable单击时将图像添加到屏幕并允许其可拖动/可旋转
【发布时间】：2019-08-17 18:23:28
【问题描述】：

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

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

我找到了很多很好的例子来演示如何使用 Jquery UI 以及在点击时向屏幕添加图像，但从未见过两者结合在一起。

这里是添加 onclick 功能的一个很好的例子：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>

【问题讨论】：

这个问题太笼统了，建议分多部分转发。

标签： javascript jquery html jquery-ui jquery-ui-draggable

【解决方案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>

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

希望这会有所帮助。

【讨论】：

如果我们只是选择添加对象的所有 ID 来调用函数，我如何将不同的 URL 传递给 addImage()？
@MikasThane 我不太明白这个问题。在您的示例中，您创建了一个图像元素，然后创建了一个类。我没有看到任何关于 ID 的信息。
我想通了，您的函数只需要通过删除总体 void 函数包装器来实现全局化。非常感谢！
我需要每次都将图像附加到页面上的同一位置。在多次附加时，它总是将图像放在前一个图像旁边，这会导致问题。无论是否存在其他图像，我如何才能将图像附加到 div 内的同一原点？
@MikasThane 我建议使用 CSS 并通过 top 和 left 设置绝对位置，或者在 jQuery UI 中使用 .position()。