Drag Drop image to update placeholder

by someprimetime

HTML

<body><div class="js-draggable">
    <ul class="js-gallery-select-pane">
              <li><a href="#"><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" draggable="true" /></a></li>
          <li><a href="#"><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" draggable="true"  /></a></li>
          <li><a href="#"><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" draggable="true" /></a></li>
          <li><a href="#"><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" draggable="true" /></a></li>
          <li><a href="#"><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" draggable="true" /></a></li>
          <li><a href="#"><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" draggable="true" /></a></li>
          <li><a href="#"><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" draggable="true" /></a></li>
          <li><a href="#"><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" draggable="true" /></a></li>
          <li><a href="#"><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" draggable="true" /></a></li>
          <li><a href="#"><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" draggable="true" /></a></li>
      
    </ul>
  <div id="drop" style="clear:both;"></div>
      <div style="clear: both;"></div>
      </div>
</body>

CSS

#drop {
  min-height: 100px;
  width: 200px;
  border: 3px dashed #ccc;
  margin: 10px;
  padding: 10px;
  clear: left;
}

.js-gallery-select-pane li {
    display: inline-block;
}

JavaScript

(function($) {
    var methods = {
        init: function(options) {
            var settings = $.extend({
                'dragTargets': null,
                'dropTarget': null
            }, options);

            return this.each(function() {
                var $caller = $(this);
                var $dropTarget = $(settings.dropTarget);
                var $dragTargets = settings.dragTargets;

                function cancel(e) {
                    if (e.preventDefault) {
                        e.preventDefault();
                    }
                    return false;
                }

                var dragItems = $('[draggable=true]');

                $.each($dragTargets, function(i, val) {
                    methods.addEventListeners(dragItems[i], 'dragstart', function(e) {
                        e.dataTransfer.setData('Text', $(this).attr('src'));
                        return false;
                    });
                });


                // Set up some event listeners on the drop object
                methods.addEventListeners($dropTarget, 'dragover', cancel);
                methods.addEventListeners($dropTarget, 'dragenter', cancel);
                methods.addEventListeners($dropTarget, 'drop', function(event) {
                    if (event.preventDefault) {
                        event.preventDefault();
                    }
                    var image = event.dataTransfer.getData('Text');

                    $(this).html('<img src="' + image + '" />');

                    return false;
                });
            });
        },

        addEventListeners: (function() {
            if (document.addEventListener) {
                return function(el, type, fn) {
                    if (el && el.nodeName || el === window) {
                        el.addEventListener(type, fn, false);
                    } else if (el && el.length) {
                        for (var i = 0; i < el.length; i++) {
                           ...