如何将png变成一个按钮，单击该按钮会生成可拖动的png

Posted 2023-05-08

【中文标题】如何将png变成一个按钮，单击该按钮会生成可拖动的png

【英文标题】：How to turn a png into a button that when clicked makes a draggable png

【发布时间】：2018-10-19 19:56:54

【问题描述】：

我正在制作各种房屋设计游戏，我想知道如何制作它，以便在固定位置有一个花盆的 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>

JS

$(function() 
  $(".draggable").draggable();
);
var selectedLayer;
$(".draggable").click(function()  
    selectedLayer = this; 
  $("#index").html(parseInt($(selectedLayer).css("z-index")))
) 
$("#up").click(function()  
    x = parseInt($(selectedLayer).css("z-index")) + 1;
  $(selectedLayer).css('z-index', x); 
  $("#index").html(x)
) //ends function
$("#down").click(function()  
    x = parseInt($(selectedLayer).css("z-index")) - 1; 
  $(selectedLayer).css('z-index', x); 
  $("#index").html(x) 
) 

完整示例： https://jsfiddle.net/okcjt5vf/312/

感谢您的帮助。

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您已经提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website doesn't work can I just paste a link。

让我看看我的理解是否正确，您希望用户能够单击一个对象（从菜单或类似的东西）并能够将其放置在屏幕上而不会从该对象消失菜单？还是我完全误解了你的问题？

正是我的意思 - 胡安·安东尼奥·奥罗斯科

【参考方案1】：

您可以在 draggable 函数上使用帮助器来克隆对象，但您还需要进行一些修改：

HTML

将可拖动对象移动到 ID 为 menu 且位于 #images 之外的新 div 将类缩图添加到可拖动对象中（这样它们就可以一次全部显示出来）

---

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

CSS

添加类miniature 从#images 中删除position:relative 这不是必需的，因为 draggable 将负责定位，如果在添加项目后释放项目时，如果离开可能会导致类似捕捉的错误 删除.draggable类 同样，这不是必需的，因为可以拖动来处理定位

---

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


.miniature 
  height: 20px;

js

向draggable 小部件添加一个助手，这个whelper 将克隆对象并删除miniature 类以使其再次全尺寸

---

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

将可放置小部件添加到 #images div，这将使 div 接受 draggable 项目

将 drop listener 添加到 droppable 小部件，在此侦听器上，您应该克隆项目并将其添加到容器中。您还应该为新元素添加一个mousedown 侦听器以设置所选层

---

$("#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")))

有了这些改变，结果如下：

jsFiddle 上的完整代码：https://jsfiddle.net/npc1sfmu/5/

【讨论】：

也检查***.com/questions/867469/…