javascript - 上传后在图像上添加图像

Question

我正在尝试创建一个网站，您可以在其中上传图像，然后选择另一张图像并将其添加到已上传的图像上。我使用 jquery 使图像可拖动和调整大小，一切正常，除了我无法将其添加到上传的图像上。 这是我的代码:

代码:

$(document).ready(function() {
  $(document).on('click', '.block-add', function() {
    var a = $(this);
    var src = a.find('img:first').attr('src');
    var elem = $('<div class="container"><img src="' + src + '" class="blocks" /></div>');
    $('.block').append(elem);
    elem.draggable();
    elem.find('.blocks:first').resizable();
    return false;
  });
});

.blocks {
  width: 10%;
  z-index: 9999;
}

.block {
  width: 100%;
  height: 100%;
  border: 1px solid #C8C8C8;
  margin: 0px;
  background-color: #F0F0F0;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="upload">
  <input type='file' onchange="readURL(this);" /> <br>
</div>
<br/>
<div class="block">
  <div class="background">
    <img id="bg" src="" alt="" width="50%" ; height="50%" ; class="center" />
  </div>
</div>
<br/>
<div id="existingImges">
  <a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
  <a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
  <a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
  <a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
</div>

所以这是本例的结果:

这就是我添加轮子后想要的效果:

Answer 1

正如 @Troy Bailey 和我提到的，成功的方法是 css 属性 z-index。

这里的变化:

第一步:

将上面的 z-index 属性添加到类 .block 中:z-index: 1;。

第二步:

对于您的 JavaScript，您必须添加一些行来增加您创建的 div 的 z-index 属性，以及类 .container。

$(document).ready(function() {
    $(document).on('click', '.block-add', function() {
        var src = $(this).find('img:first').attr('src');

        //New line
        //First, find out how many images has being added and dragged
        var foundAddedDivs = $('.block').find('.container').size();
        //New line
        //Second, get the current value from recently added 'z-index' from fist step.
        var backGroundDivIndex = $('.block').css("z-index");
        //New line
        //Third: Calulate a new value for 'z-index' for each draggable elements
        var zIndex = backGroundDivIndex + foundAddedDivs;
        //Modified line
        //Forth: Creates a new div and add calculated z-index to draggable element
        var elem = $('<div class="container" style="z-index: '+ zIndex +'">
                      <img src="' + src + '" class="blocks" /></div>');

        $('.block').append(elem);
        elem.draggable();
        elem.find('.blocks:first').resizable();
        return false;
        });
    });