单击时将图像添加到屏幕并允许其可拖动/可旋转
Posted
技术标签:
【中文标题】单击时将图像添加到屏幕并允许其可拖动/可旋转【英文标题】：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>
【问题讨论】：
这个问题太笼统了，建议分多部分转发。 【参考方案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()。以上是关于单击时将图像添加到屏幕并允许其可拖动/可旋转的主要内容，如果未能解决你的问题，请参考以下文章