How to turn a png into a button that when clicked makes a draggable png

Question

I'm making a house designing game of sorts and i'm wondering how i could make it so that there is a png of a flower pot in a set position.

When clicked a draggable png of the flower pot appears and the player can do it indefinitely.

this is my code so far:

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

full example: https://jsfiddle.net/okcjt5vf/312/

Thank you for any help.

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). — Paulie_D, May 09 '18 at 16:27
let me see if i understood correctly, you want the user to be able to click on an object (from a menu or something similar) and be able to place it on the screen without the object disappearing from the menu? or i completely misunderstood your question? — Juan Antonio Orozco, May 09 '18 at 16:31

score 0 · Answer 1 · answered May 09 '18 at 18:16

You may use a helper on the draggable function to clone the object, but you will also need to do some modifications:

HTML

move the dragables to a new div with id menu outside of #images
add the class miniature to the draggables (so they can be shown all at once)

<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

add the class miniature
remove position:relative from #images
- this is no needed because draggable will take care of the positioning, if left may cause a snapping-like bug when releasing the item after its added
delete the .draggable class
- again, this is no needed because draggable will take care of the positioning

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

.miniature {
  height: 20px;
}

js

add a helper to the draggable widget, this whelper will clone the object and remove the miniature class to make it full size again

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

add the droppable widget to the #images div, this will make the div accept the draggable items
add the drop listener to the droppable widget, on this listener you should clone the item and add it to the container. also you should add a mousedown listener to the new element to set the selected layer

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

With this changes this would be the result:

full code on jsFiddle: https://jsfiddle.net/npc1sfmu/5/

also check https://stackoverflow.com/questions/867469/when-i-make-a-draggable-clone-and-drop-it-in-a-droppable-i-cannot-drag-it-again — Juan Antonio Orozco, May 09 '18 at 18:52

How to turn a png into a button that when clicked makes a draggable png

1 Answers1