drag and drop cloned element

try to patch jquery drag and drop transform bugs

by David McClelland

HTML

<body>
  <div id="controls">
    <button id="zoomIn">zoom in</button>
    <button id="zoomOut">zoom out</button>
    <button id="zoomRestore">zoom restore</button>
  </div>
  <div>
  <p>
  zoom in and drag over dropHere - the out function fires while draggable is still inside dropHere when it is zoomed.
  </p>
  </div>
  <div class="dragImg"><img class="img" src="http://www.thumbshots.com/Portals/0/Images/Feature%20TS%201.jpg">
  </div>

  <div id="dropHere"></div>
</body>

CSS

#dropHere {
  width: 200px;
  height: 200px;
  border: dotted 1px black;
  transform-origin: top left;
  transform: scale(1);
}

JavaScript

// wrap the plugin inside jquery reference to avoid namespace pollution of '$'
(function($) {
    $.fn.greenify = function(options) {
      // default options
      var settings = $.extend({
        // These are the defaults.
        color: "#556b2f",
        backgroundColor: "black"
      }, options);

      // private vars here:
      var shade = "#55FF2f";

      return this.css({
        color: settings.color,
        backgroundColor: settings.backgroundColor
      });

    };

}(jQuery));

$(function() {
  //Make every clone image unique.  
  var counts = [0];
  var resizeOpts = {
    handles: "all",
    autoHide: true
  };
  $(".dragImg").draggable({
    helper: "clone",
    //Create counter
    start: function() {
      counts[0]++;
    }
  });

  $("#dropHere").droppable({
  	greedy: 'true',
    tolerance: 'pointer',
    over: function(e, ui) {
    		if(e.type === 'dropover') {
        	$('#dropHere').css({border: 'solid'});
        }
    },
    out: function(e, ui) {
        	$('#dropHere').css({border: 'dotted'});
    },
    drop: function(e, ui) {
      if (ui.draggable.hasClass("dragImg")) {
        $(this).append($(ui.helper).clone());
        //Point to dragImg class in dropHere and add new class.
        $("#dropHere .dragImg").addClass("item-" + counts[0]);
        $("#dropHere .img").addClass("imgSize-" + counts[0]);

        //Remove the current class (ui-draggable and dragImg)
        $("#dropHere .item-" + counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging");

        $(".item-" + counts[0]).dblclick(function() {
          $(this).remove();
        });
        make_draggable($(".item-" + counts[0]));
        $(".imgSize-" + counts[0]).resizable(resizeOpts);
      }
    }
  });


  var zIndex = 0;

  function make_draggable(elements) {
    elements.draggable({
      containment: 'parent',
      start: function(e, ui) {
        ui.helper.css('z-index', ++zIndex);
      },
      stop: function(e, ui) {}
    });
  }
/* jquery-ui...