Store img on click and display it in other div on click

Question

I am trying to do the following:

• If user clicks on an img, that image should be displayed in another placeholder div and give it a border by adding the class "occupied", preferably on click.

• I got this to work with the background color property (line 1-9), however, I couldn't come up with a solution if I do the same with pictures, I have tried using the img tag, then I have tried putting the img in a div, as background, and even tried to just insert it on click to a placeholder.

• I want the code to check if the placeholder div is empty or 'occupied', if empty, place the pic inside, if not, place it in the next empty placeholder div.

Ideally, a solution like in the lines 1-9 is what I want.

Here is the pen where I got stuck:

 $('.gallery>div').click(function(){
 if ($(".insert:eq(0)").hasClass("occupied"))
 {$(this).clone(this)    .appendTo(".insert:eq(1)").$(".wrap:eq(1)").addClass("occupie   d");} 

http://codepen.io/damianocel/pen/gawmeY

Thank you very much

Answer 1

You can try something like

$(document).ready(function() {
  var paint,
    $img;
  $(".color").click(function() {
    paint = $(this).css('background-color');
    $img = undefined;
  })
  $('.gallery').on('click', 'div', function() {
    $img = $(this).clone();
    paint = undefined;
  });

  $('.wrap .insert').click(function() {
    $(this).css("border-color", paint);
  });
  $('.wrap').on('click', '.insert:not(.occupied)', function() {
    if ($img) {
      $(this).append($img).addClass('occupied');
      $img = undefined;
    }
  });

});


$(document).ready(function() {
  function randomColor() {
    return '#' + ('000000' + Math.floor(Math.random() * 16777216).toString(16)).slice(-6);
  };

  $("h1").click(function() {
    $('body').css('background', randomColor());
  });
})

.wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  ;
  height: 100px;
  width: 100p5;
  border: 1px solid grey;
}
.insert {
  height: 100px;
  width: 100px;
  border: 1px solid grey;
}
#one {
  background-color: blue;
  float: left;
}
#two {
  background-color: red;
  float: left;
}
#three {
  background: green;
  float: left;
}
.gallery>div {
  display: inline-block;
}
.gal1 {
  height: 100px;
  width: 100px;
  background: url("https://i.kinja-img.com/gawker-media/image/upload/s--_KjrmVSk--/c_fill,fl_progressive,g_north,h_358,q_80,w_636/19c12pvu8o9sljpg.jpg");
}
.gal2 {
  height: 100px;
  width: 100px;
  background: url(http://www.purple-planet.com/communities/5/004/012/574/565//images/4608142514_255x230.jpg);
}
.gal3 {
  height: 100px;
  width: 100px;
  background: url("http://image.shutterstock.com/display_pic_with_logo/892819/164734181/stock-vector-glossy-planets-colorful-vector-set-on-dark-sky-background-164734181.jpg");
}
.occupied {
  border: 3px pink solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="random_background">
  <h1>click</h1>

  <div class="color" id="one">blue</div>
  <div class="color" id="two">red</div>
  <div class="color" id="three">green</div>
  <div class="wrap">
    <div class="insert"></div>
    <div class="insert"></div>
    <div class="insert"></div>
  </div>
  <div class="gallery">
    <div class="gal1"></div>
    <div class="gal2"></div>
    <div class="gal3"></div>
  </div>
  </footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</div>