如何将所有图像放在元素上

Question

div.image-block中的 img 标记用于后台。

用户将通过拖放将图像放在.block3上

如何创建一个包含.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>

Answer 1

你在想这样的事吗？

  onSubmit() {
            debugger
            form.Status=0;
            form.isActive=true;
            this.setState({files: []})
            return(form.Key > 0 ? this.creater : this.creater).call(this, form);
            return false;
    }

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