How to get all images dropped on an element

Question

The img tag within div.image-block is used for background.

User will put images on .block3 by drag and drop

How to create an element that will contain all elements from .image-block?

<style>
    .image-block {
        position: relative;
        z-index: 1;
        width: 1490px;
        height: 400px;
    }
    .block3 {
        position: absolute;
        z-index: 2;
        top: 100px;
        left: 100px;
        width: 200px;
        height: 200px;
        display: block;
    }
</style>
<div class="image-block">
    <img src="https://hsto.org/getpro/habr/post_images/dde/292/490/dde292490b55a8c0824ecc6cc038f999.png" alt="картинка" width="1490" height="400">
    <div class="block block3"></div>    
</div>

It is not clear what you are asking. Please take a moment to read: https://stackoverflow.com/help/mcve — Alexander Higgins, Jul 20 '17 at 00:25
not sure you mean by "will contain all elements from .image-block," but you can just use css to set the image as background for the div: `background: url('https://whatever')` — Kai, Jul 20 '17 at 00:25
There is no easy way to do this. You may want to look at this for help though? https://stackoverflow.com/questions/6887183/how-to-take-screenshot-of-a-div-with-javascript — Thomas Devries, Jul 20 '17 at 00:25

score 0 · Answer 1 · answered Jul 20 '17 at 02:09

Are you thinking something like this?

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function AddImages() {

  for (var i = 0; i < 20; i++) {

    var randomColor = getRandomColor();

    var content = "<div class='dummyImage' style='background:" + randomColor + "'></div>";

    $("#chooseImages").append(content);
    $(".dummyImage").draggable({
      snap: ".block3, .dummyImage",
      stop: function() {

        $("#copyFromImageBlock").empty();

        $("#chooseImages .dummyImage").each(function() {
          if (
          $(this).css("left") != "0px" &&
          $(this).css("right") != "0px" &&
          $(this).css("bottom") != "0px" &&
          $(this).css("top") != "0px"
          ) {
            $($(this)).clone().appendTo("#copyFromImageBlock").css({
              "left": "0",
              "right": "0",
              "top":"0",
              "bottom":"0"              
            });
          }
        });
      }
    });
  }
}

AddImages();

.image-block {
  position: relative;
  z-index: 1;
  width: 400px;
  height: 400px;
  background: #CCCCCC;
  outline: solid 1px black;
}

.block3 {
  position: absolute;
  z-index: 2;
  top: 100px;
  left: 100px;
  width: 200px;
  height: 200px;
  display: block;
  background: #AAAAAA;
}

#chooseImages {
  width: 400px;
  position: relative;
  outline: 1px solid black;
}

#copyFromImageBlock {
  width: 50px;
  height: 400px;
  position: absolute;
  right: -50px;
  top: 0px;
  overflow: hidden;
  outline: 1px solid black;
  background: #444;
}

.dummyImage {
  width: 50px;
  height: 50px;
  float: left;
  z-index: 500;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>


The img tag within div.image-block is used for background. User will put images on .block3 by drag and drop. How to create an element that will contain all elements from .image-block?

<div class="image-block">
  <div class="block3"></div>
  <div id="copyFromImageBlock"></div>
</div>

<div id="chooseImages"></div>

How to get all images dropped on an element

1 Answers1