其他可丢弃的div不像第一个那样工作

Question

我的第一个可放置的div框工作正常但是我的可放置div盒的其余部分却没有。我一直在查看我的代码，无法找出问题所在。

当我在其他div（2,3,4）中拖动一个可拖动的克隆元素时，它们会进入页面的最底部，然后当我单击克隆时，它突然转到第一个，甚至还没有尝试移动它。
HELP？

谢天谢地。

        $(document).ready(function() {
          $("#classicTemplate").resizable();

          $(".dragImgs").draggable({
            helper: "clone",
            snap: ".dropTarget",
            appendTo: "#classicTemplate",
            revert: "invalid"
          });

          $(".dropTarget").droppable({
            accept: ".dragImgs",
            hoverClass: "highlight",
            drop: function(event, ui) {
              var $imgClone = ui.helper.clone();
              if (!$imgClone.is(".inside-dropTarget")) {
                $(this).append($imgClone.addClass("inside-dropTarget").draggable({
                  containment: ".dropTarget",
                  position: "relative"
                }));

                $imgClone.dblclick(function() {
                  $imgClone.remove();
                });
              }
            }
          }).resizable({
            animate: "true",
            ghost: "true",
            handles: "n, e, s, w, ne, se, sw, nw, all"
          });
        });

        .container {
          background-color: #bbb;
        }
        
        .imageContainer {
          float: left;
          margin: 10px;
          width: 230px;
          background-color: #fff;
        }
        
        .imageContainer img {
          margin: 10px;
          margin-left: 15px;
        }
        
        #classicTemplate {
          list-style-type: none;
          float: right;
          margin-top: 10px;
          background-color: #ccc;
        }
        
        #classicTemplate ul {
          list-style-type: none;
          padding: 0;
        }
        
        .dropTarget {
          background-color: #aaa;
          margin: 10px;
          width: 210px;
          height: 143px;
        }
        
        .dragImgs {
          width: 50px;
          height: 50px;
          margin: 10px;
          background-color: red;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="container">
  <div class="imageContainer">
    <div class="dragImgs">
    </div>

    <div class="dragImgs">
    </div>

    <div class="dragImgs">
    </div>
  </div>

  <div id="classicTemplate">
    <div class="dropTarget pull-left">
      1
    </div>
    <div class="dropTarget pull-left">
      2
    </div>
    <div class="dropTarget pull-left">
      3
    </div>
    <div class="dropTarget pull-left">
      4
    </div>
  </div>
</div>