JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//extjs.cachefly.net/ext-4.1.0-gpl/resources/css/ext-all-gray.css" />

<div id=list>
    <img id=i1 src="http://styledip.com/wp-content/uploads/2011/11/fish-2.jpg"/>
    <img id=i2 src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Niobe050905-Siamese_Cat.jpeg/220px-Niobe050905-Siamese_Cat.jpeg"/>
    <img id=i3 src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Timba%2B1.jpg/220px-Timba%2B1.jpg"/>
    <img id=i4 src="http://images.nationalgeographic.com/wpf/media-live/photos/000/007/cache/spider-monkey_719_600x450.jpg"/>
    <img id=i5 src="http://www.myessentia.com/blog/wp-content/uploads/2011/03/chicken.jpg"/>
    <img id=i6 src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Timba%2B1.jpg/220px-Timba%2B1.jpg"/>
    <img id=i7 src="http://styledip.com/wp-content/uploads/2011/11/fish-2.jpg"/>
    <img id=i8 src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Niobe050905-Siamese_Cat.jpeg/220px-Niobe050905-Siamese_Cat.jpeg"/>
    <img id=i9 src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Timba%2B1.jpg/220px-Timba%2B1.jpg"/>
</div>

CSS

img {
width:100px;
    height:167px;
    border:2px solid white;
}

#list{
    width:350px;
border:1px solid purple
}

JavaScript

Ext.application({
    launch: function() {

        var dd1 = new Ext.dd.DDProxy('i1', 'g1');
        dd1.constrainTo('list');
        dd1.startDrag = function() {
            this.el = Ext.get(this.id);
        };
        dd1.onDragEnter = function(e, targetId) {

            var targetEl = Ext.get(targetId);
            this.targetXY = targetEl.getXY();

            var n1 = this.el.dom;
            var n2 = targetEl.dom;

            var p = n2.parentNode,
                s = n2.nextSibling;

            n1.parentNode.replaceChild(n2, n1);
            p.insertBefore(n1, s);
            
        };
        dd1.onInvalidDrop = function() {
            this.el.moveTo(this.startPageX, this.startPageY, true);
        };
        dd1.onDragDrop = function(e, id) {
            this.el.moveTo(this.targetXY[0], this.targetXY[1], true);
        };


        var dd2 = new Ext.dd.DD('i2', 'g1');
        var dd3 = new Ext.dd.DD('i3', 'g1');
        var dd4 = new Ext.dd.DD('i4', 'g1');
        var dd5 = new Ext.dd.DD('i5', 'g1');
        var dd6 = new Ext.dd.DD('i6', 'g1');
        var dd7 = new Ext.dd.DD('i7', 'g1');
        var dd8 = new Ext.dd.DD('i8', 'g1');
        var dd9 = new Ext.dd.DD('i9', 'g1');

    }
});