JSFiddle - React, Tailwind, and code Playground

by el_chief

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"/>
</div>

CSS

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

#list{
border:1px solid purple
}
.faggot{
border:2px dashed black;
}

JavaScript

Ext.application({
    launch: function() {        
        
        var dz = new Ext.dd.DragZone('list', {
            getDragData: function(e){
                var source = e.getTarget();
                
                var d = source.cloneNode(true);
                
                
                //Ext.fly(source).hide();
                
                d.id = Ext.id();
                return {
                    ddel: d,
                    sourceEl: source,
                    repairXY: Ext.fly(source).getXY()
                }
            },
            
            getRepairXY: function(){
                return this.dragData.repairXY;
            },
            
            afterRepair:function(){
                       
            }
        });
        
        var dpz = new Ext.dd.DropZone('list', {
            getTargetFromEvent: function(e){
                return e.getTarget();
            },
            
            onNodeEnter: function(target, dd, e, data){
                Ext.fly(target).addCls('faggot');
            },
            
            onNodeOut: function(target, dd, e, data){
                Ext.fly(target).removeCls('faggot');
            },
            
            onNodeOver: function(target, dd, e, data){
                return Ext.dd.DropZone.prototype.dropAllowed;
            },
            
            onNodeDrop: function(target, dd, e, data){
                return true;
            },
        });
    }
});