单击时将图像添加到屏幕并允许它 draggable/rotatable

Question

我正在尝试创建一种地图生成器，用户可以在其中从预定义对象列表中 select，单击其中一个对象后，它将出现在带有方向选项（拖动、旋转、调整大小）。

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

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

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

（指向点击的例子很多）

这是我喜欢的来自 link（来自 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>

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

希望对您有所帮助。

单击时将图像添加到屏幕并允许它 draggable/rotatable

Add image to screen on-click and allow it to be draggable/rotatable

html

javascript

jquery

jquery-ui

jquery-ui-draggable