Javascript 如何将一个png转换为一个按钮，当点击该按钮时，会生成一个可拖动的png

我正在制作一个类似于房屋设计的游戏，我想知道我如何制作它，以便在一个固定的位置上有一个花盆的png

当点击一个可拖动的png的花盆出现，玩家可以无限期地这样做

这是我目前的代码：

HTML

<div id="buttons">
  <span class="button" id="up">up</span>
  <span class="button" id="down">down</span>
  <div><span>Z-index: </span><span id="index"></span></div>
</div>
<div id="images">
  <img src="http://i67.tinypic.com/wum2y8.jpg" id="background">
  <img class="draggable" src="http://i64.tinypic.com/jac9sj.jpg">
  <img class="draggable" src="http://i64.tinypic.com/se6gia.jpg">
  <img class="draggable" src="http://i65.tinypic.com/205p9v6.jpg">
  <!--more img.draggable elements -->
</div>

完整示例：

---

感谢您的帮助。

您可以使用

可拖动功能上的帮助器来克隆对象，但您还需要进行一些修改：

HTML

<div id="buttons">
  <span class="button" id="up">up</span>
  <span class="button" id="down">down</span>
  <div><span>Z-index: </span><span id="index"></span></div>
</div>
<div id="images">
  <img src="http://i67.tinypic.com/wum2y8.jpg" id="background">
  <img class="draggable" src="http://i64.tinypic.com/jac9sj.jpg">
  <img class="draggable" src="http://i64.tinypic.com/se6gia.jpg">
  <img class="draggable" src="http://i65.tinypic.com/205p9v6.jpg">
  <!--more img.draggable elements -->
</div>


将dragables移动到id为
菜单
在
#图像
将类minimal添加到DragTables中（这样它们可以一次全部显示）


js


向
可拖动的
小部件添加一个帮助器，这个小部件将克隆对象并删除
微型
类，使其再次变为全尺寸



将可拖放小部件添加到
#images
div，这将使div接受
可拖动的
项

将拖放侦听器添加到可拖放的

小部件中，在此侦听器上，您应该克隆项目并将其添加到容器中。此外，您还应该向新元素添加一个

mousedown

侦听器，以设置选定的层

---

有了这些变化，结果将是：

---

JSFIDLE上的完整代码：

寻求代码帮助的问题必须包含在问题本身中重现问题所需的最短代码，最好是在堆栈片段中。虽然您提供了一个链接，但如果该链接无效，您的问题对其他将来遇到相同问题的用户将毫无价值。请看。让我看看我是否理解正确，您希望用户能够单击某个对象（从菜单或类似的东西），并能够将其放置在屏幕上，而不会使对象从菜单中消失？或者我完全误解了你的问题？正是我的意思-胡安·安东尼奥·奥罗斯科阿尔索检查

<div id="buttons">
  <span class="button" id="up">up</span>
  <span class="button" id="down">down</span>
  <div><span>Z-index: </span><span id="index"></span></div>
</div>
<div id="menu">
  <img class="draggable miniature" src="http://i64.tinypic.com/jac9sj.jpg">
  <img class="draggable miniature" src="http://i64.tinypic.com/se6gia.jpg">
  <img class="draggable miniature" src="http://i65.tinypic.com/205p9v6.jpg">
  <!--more img.draggable.miniature elements -->
</div>
<div id="images">
  <img src="http://i67.tinypic.com/wum2y8.jpg" id="background">
</div>

#images {
  overflow: auto;
  margin-top: 10px;
  height: 778px;
}

.miniature {
  height: 20px;
}

$(".draggable").draggable({
  helper: function(event) {
      return $(this).clone().removeClass("miniature")
  }
});

$("#images").droppable({
  accept: ".draggable",
  drop: function(event, ui) {
    var new_item = $(ui.helper).clone();

    new_item.removeClass('draggable');
    new_item.mousedown(setLayer);
    new_item.draggable();

    $(this).append(new_item);
  }
});

setLayer = function() {
  selectedLayer = this;
  $("#index").html(parseInt($(selectedLayer).css("z-index")))
}