JavaScript
CSS
Run Code
Open in Fiddle
Ext.application({ name : 'Fiddle', launch : function() { var store = Ext.create('Ext.data.ArrayStore',{ fields:['thumb','id'], data:[ ['https://loremflickr.com/200/100?lock=1',1], ['https://loremflickr.com/200/100?lock=2',2], ['https://loremflickr.com/200/100?lock=3',3], ['https://loremflickr.com/200/100?lock=4',4], ['https://loremflickr.com/200/100?lock=5',5], ['https://loremflickr.com/200/100?lock=6',6], ['https://loremflickr.com/200/100?lock=7',7], ['https://loremflickr.com/200/100?lock=8',8], ['https://loremflickr.com/200/100?lock=9',9], ] }); var dataview = Ext.create('Ext.dataview.DataView',{ fullscreen:true, padding:10, store:store, itemTpl: '<div class="name" data-id="{id}"><img data-id="{id}" src="{thumb}" /></div>' }); store.on('datachanged',attachDrag); attachDrag(store); function attachDrag(store){ var items = Ext.query('#'+dataview.element.id+' .name'); Ext.each(items,function(item){ if(!item.source) item.source = new Ext.drag.Source({ element: Ext.fly(item), constrain: dataview.element, describe: function(info) { // console.log('describe',Ext.fly(info.eventTarget)); info.setData('item', Ext.fly(info.eventTarget).getAttribute('data-id')); }, revert: true, listeners:{ dragstart:function(source,info){ //console.log(source,info); }, dragend:function(source,info){ // container.updateData(data); return false; } } }); if(!item.target) item.target=new Ext.drag.Target({ element: Ext.fly(item), listeners: { drop: function(target,info){ var component = Ext.fly(target.getElement()); var id = component.getAttribute('data-id'); info.getData('item').then(function(data) { var srcIdx = store.findExact('id',parseInt(data,10)); var tgtIdx = store.findExact('id',parseInt(id,10)); var srcRec = store.getAt(srcIdx); var tgtRec = store.getAt(tgtIdx); store.remove(srcRec); store.insert(tgtIdx,srcRec); // clean up the source and target of old item console.log(info); Ext.destroy(info.source); //Ext.destroy(info.target); // All good, show the image }, function() { // Handle failure case }); return false; } } }); }); } Ext.Viewport.add(dataview); } });