JSFiddle - React, Tailwind, and code Playground

by someprimetime

HTML

<body><div class="js-draggable">
    <ul class="js-gallery-select-pane">
  <li class="drag" id="rem" draggable="true"></div>
  <li class="drag" id="brucel" draggable="true"></div>
  <li class="drag" id="Rich_Clark" draggable="true"></div>
  <li class="drag" id="leads" draggable="true"></div>
  <li class="drag" id="akamike" draggable="true"></div>
  <li class="drag" id="jackosborne" draggable="true"></div>
    </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;
}
p {
  margin: 3px 0;
}
#rem {
  background: url(http://twitter.com/api/users/profile_image/rem) no-repeat;
}
#brucel {
  background: url(http://twitter.com/api/users/profile_image/brucel) no-repeat;
}
#Rich_Clark {
  background: url(http://twitter.com/api/users/profile_image/Rich_Clark) no-repeat;
}
#leads {
  background: url(http://twitter.com/api/users/profile_image/leads) no-repeat;
}
#akamike {
  background: url(http://twitter.com/api/users/profile_image/akamike) no-repeat;
}
#jackosborne {
  background: url(http://twitter.com/api/users/profile_image/jackosborne) no-repeat;
}
.drag {
  height: 48px;
  width: 48px;
  float: left;
  -khtml-user-drag: element;
  margin: 10px;
}

JavaScript

/* This plugin takes both drop and drag targets */

(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;

                var people = {
                    rem: {
                        name: "Remy Sharp",
                        blog: "http://remysharp.com"
                    },
                    brucel: {
                        name: "Bruce Lawson",
                        blog: "http://brucelawson.co.uk"
                    },
                    "Rich_Clark": {
                        name: "Rich Clark",
                        blog: "http://richclarkdesign.com/"
                    },
                    akamike: {
                        name: "Mike Robinson",
                        blog: "http://akamike.net/"
                    },
                    leads: {
                        name: "Tom Leadbetter",
                        blog: "http://www.tomleadbetter.co.uk/"
                    },
                    jackosborne: {
                        name: "Jack Osborne",
                        blog: "http://jackosborne.co.uk/"
                    }
                };

                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.id);
                        return false;
                    });
                });

...