PDA

View Full Version : Drag and Drop in the Web Desktop



chrizmaster
6 Mar 2009, 6:57 AM
Hi @all,

I am still new to extjs, but I am working at our own version of a web desktop.

For this I've implemented the abillity to drag and drop the desktop icons on the web desktop.

I've decided to publish this here. If anyone has a better sollution, don'T hestitate to let me (us) know :)

ok, I took the drag and drop example in the extjs tutorial and changed some things.

Here is the "new" dd.js



Ext.override(Ext.dd.DDProxy, {
startDrag: function(x, y) {
var dragEl = Ext.get(this.getDragEl());
var el = Ext.get(this.getEl());

dragEl.applyStyles({border:'','z-index':2000});
dragEl.update(el.dom.innerHTML);
dragEl.addClass(el.dom.className + ' dd-proxy');
}
});

Ext.BLANK_IMAGE_URL = 'ressources/ext/resources/images/default/s.gif';

Ext.namespace('drag');

drag.dd = function() {
return {
init: function() {

var arrayOfdt = document.getElementsByTagName('dt');

for (i in arrayOfdt) {
if(arrayOfdt[i].id!=null){
Ext.get(arrayOfdt[i].id).dd = new Ext.dd.DDProxy(arrayOfdt[i].id, 'group');
}
}
}
};


As you noticed, I'm searching for all the dt Tags inside the desktop and add a dd Proxy to it.

in the desktop file (in my case desktop.jsp) u have to place this:



<script type="text/javascript">Ext.onReady(drag.dd.init, drag.dd);</script>


and thats it. Nothing special, but I think some users may think this is usefull.

Chriz

PS: I am saving the new positions of the icons in a database...

cccpx
2 Apr 2009, 4:08 PM
Got any tips to save the data on the back-end?
I have tried numerous resources and tutorials, although it doesnt seem to "catch" the data or what so ever.

chrizmaster
2 Apr 2009, 11:08 PM
I wrote an override for that. look at the part where i print out the results.

this values, you could store with an ajax request in your database or whereever.


var width = screen.width;
var height = screen.height;

Ext.override(Ext.dd.DD, {
startDrag : function(x, y) {
var dragEl = Ext.get(this.getDragEl());
var el = Ext.get(this.getEl());

dragEl.applyStyles({border:'','z-index':2000});
dragEl.addClass(dragEl.baseCls);

dragEl.setSize(el.getSize());
dragEl.update(el.dom.innerHTML);
dragEl.addClass(el.dom.style + ' dd-proxy');


dragEl.fadeOut({
endOpacity: 0.20,
easing: 'easeOut',
duration: .5,
remove: false,
useDisplay: false
});
}
});

Ext.override(Ext.dd.DD, {
endDrag: function(x,y){
Ext.get(this.getDragEl()).fadeIn({
endOpacity: 1,
easing: 'easeOut',
duration: 0.8
});
var el = Ext.get(this.getDragEl());

if (typeof window.innerWidth != 'undefined'){
console.log(Math.round((el.getY()/window.innerHeight)*100));
console.log(Math.round((el.getX()/window.innerWidth)*100));

}
}

});


By the way, I like effects, so i put in a fadeout effect while starting the operation and a fadein while ending it.