将对象拖到背景图像上

Question

我编写了以下代码（使用Interact.js），可以在.dropzone之上拖放两个对象，同时还可以克隆这些对象。但是，当我将背景图像添加到div .dropzone时，删除的对象位于此背景图像后面。我希望他们在图像之上。我该怎么办？

CSS：

<style>
    #drag-1 {
      background: #1ABB9C;
      color: #000000;
      width: 35px;
      height: 35px;
      border-radius: 50%;
      text-align: center;
      -webkit-transform: translate(0px, 0px);
              transform: translate(0px, 0px);
    } 

    #drag-2 {   
      background-color: #1ABB9C;
      color: #000000;
      width: 150px;
      height: 20px;
      text-align: center;
      -webkit-transform: translate(0px, 0px);
              transform: translate(0px, 0px);
    }

    .dropzone {
      background-color: #e9ebed;
      padding: 10px;
      width: 100%;
      height: 200px;
       border: dashed 4px transparent;
      float:left;
    }

    .drop-active {
      border-color: #aaa;
    }

    .drop-target {
      background-color: #3f5265;
      color: #FFF;
      border-color: #fff;
      border-style: solid;
    }
</style>

HTML：

<div id="drag-1" class="draggable"></div>
<div id="drag-2" class="draggable"></div>
<div id="dropzone" class="dropzone"></div>

JavaScript的：

<script type="text/javascript">
    // target elements with the "draggable" class
    interact('.draggable').draggable({
        inertia: true,
        restrict: {
          restriction: ".dropzone",
          endOnly: true,
          elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
        },
        autoScroll: true,
        onmove: function (event) {
          var target = event.target;   
          var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
          var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

          target.style.webkitTransform =
          target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';

          target.setAttribute('data-x', x);
          target.setAttribute('data-y', y);
        },
        onend: function(event) {
            console.log(event);
        }
    }).on('move', function (event) {
    var interaction = event.interaction;
    if (interaction.pointerIsDown && !interaction.interacting() && event.currentTarget.getAttribute('clonable') != 'false') {
      var original = event.currentTarget;
      var clone = event.currentTarget.cloneNode(true);
      var x = clone.offsetLeft;
      var y = clone.offsetTop;
      clone.setAttribute('clonable','false');
      clone.style.position = "absolute";
      clone.style.left = original.offsetLeft+"px";
      clone.style.top = original.offsetTop+"px";
      original.parentElement.appendChild(clone);
      interaction.start({ name: 'drag' },event.interactable,clone);
    }
    });

    // enable draggables to be dropped into this
    interact('.dropzone').dropzone({  
      // Require a 50% element overlap for a drop to be possible
      overlap: 0.50,

      // listen for drop related events:

      ondropactivate: function (event) {
        // add active dropzone feedback
        event.target.classList.add('drop-active');
      },
      ondragenter: function (event) {
        var draggableElement = event.relatedTarget,
            dropzoneElement = event.target;

        // feedback the possibility of a drop
        dropzoneElement.classList.add('drop-target');
      },
      ondragleave: function (event) {
        // remove the drop feedback style
        event.target.classList.remove('drop-target');
      },
      ondropdeactivate: function (event) {
        // remove active dropzone feedback
        event.target.classList.remove('drop-active');
        event.target.classList.remove('drop-target');
      }
    });

    $(".dropzone").html("<img style='position:absolute' src='https://s-media-cache-ak0.pinimg.com/originals/fb/d5/55/fbd5556e0e364b31166bebfce433c14e.jpg'>");
</script>