[1.1] Opacity Problem after after doing DND (FireFox Mac)
Posted in xn--kfs74mzzid01b.com edit by smith on January 7th, 2009
I'm developping an desktop-like application where you can create Icons - with context menus on them -, move them via drag and drop, delete them etc...
To make DND fit my needs I overwrote most DND methods. Each tile on my desktop (which are made of compiled templates, since the data is loaded as an Ext.View) is a DragSource. Here's the Code I use to make each tile drag&droppable:
/* initTileDD:
* making each tile draggable overwriting the default ext-DD-methods
* to optimize things a little
*/
initTileDD = function(el) {
var dragsource = new Ext.dd.DragSource(el, {groups:'elements'});
dragsource.centerFrame = true;
dragsource.alignElWithMouse= function(ddel, x, y) {
el.setX(x-el.getWidth()/2);
el.setY(y-el.getHeight()/2);
}
dragsource.onMouseUp = function(e) {
}
// save element's original position, we might need
// to restore it later
dragsource.onBeforeDrag = function(data, e) {
oldX = el.getX();
oldY = el.getY();
}
// start dragging. leave dragged element on its original position
// but make it 30% transculent.
// additionally show the indicator box
dragsource.onStartDrag = function(e) {
indicator.show();
//indicator.setOpacity(1, false);
//el.setOpacity(.3, false);
}
// do dragging and show possible positions for dropping
// via a red or green semi transculent indicator-box
dragsource.onDrag = function(e) {
var mouseX = e.getPageX();
var mouseY = e.getPageY();
var cellX = self.getCellX(mouseX);
var cellY = self.getCellY(mouseY);
indicator.setX(cellX);
indicator.setY(cellY);
// show OK-indicator if mouse is over area where dropping is allowed.
// dropping is allowed inside the innerdesktop, on cells containing no tile
if (cellHasTile(CSD.Desktop.getRelX(cellX), CSD.Desktop.getRelY(cellY)) == false && CSD.Desktop.inside(mouseX, mouseY)) {
indicator.set({cls:'indicator_ok'})
}
else {
indicator.set({cls:'indicator'})
}
return true;
}
// hover effect on tabs
dragsource.onDragOver = function(e, id) {
if (CSD.Tabview.isTab(id)) {
if (id != CSD.Tabview.getSelected())
CSD.Tabview.hoverTab(id);
indicator.hide();
}
else {
CSD.Tabview.hoverTab(null);
indicator.show();
}
return true;
}
dragsource.onDragOut = function(e, id) {
}
// finally drop the object
dragsource.onDragDrop = function(e, id) {
// drop target is a tab, thus move tile to
// another tab (id), only if tab is not the selected tab
if (CSD.Tabview.isTab(id)) {
//el.setOpacity(1.0, true);
if (id != CSD.Tabview.getSelected()) {
var tab = Ext.get(id);
// move to tab (animated)
el.moveTo(tab.getX(), tab.getY(), true);
// additionally add frame effect to target tab
// tab.frame();
// move in the backend
self.moveToTab(el.id, id);
// tell user which tile has been moved and to which location
var tile = self.getRecord(el.id).data;
var tab = CSD.Tabview.getRecord(id).data;
Ext.example.msg($L.LinkMoved.title, $L.LinkMoved.msg, tile.title, tab.title);
}
}
// target is not a tab, so
// if drop-target is trashbox, delete tile, otherwise move on desktop if drop-target is desktop
else {
// mouse position to cell position
var mouseX = e.getPageX();
var mouseY = e.getPageY();
var cellX = self.getCellX(mouseX);
var cellY = self.getCellY(mouseY);
// move element if cell ist free
if (cellHasTile(CSD.Desktop.getRelX(cellX), CSD.Desktop.getRelY(cellY)) == false && CSD.Desktop.inside(mouseX, mouseY)) {
el.setX(cellX);
el.setY(cellY);
// decent frame fx indicates new position
//el.frame();
}
else {
// otherwise restore old position
el.setX(oldX);
el.setY(oldY);
// red frame fx indicates that element could not be moved!
//el.frame("ff0000");
Ext.example.msg($L.InvalidPosition.title, $L.InvalidPosition.msg);
}
self.saveTile(el.id);
}
return true;
}
// hide raster-indicator and hover-effects
// after dd is done
dragsource.onEndDrag = function(e) {
CSD.Tabview.hoverTab(null);
indicator.hide();
}
}
Now the actual problem:
Before doing any Dragging in my application elements with opacity between 0 & 1 are shown correctly. E.g. masks of modal dialogs ord disabled menu items. AFTER doing DND however, opacity does not work correctly anymore ???!! The elements drawn with opacity between 0 and 1 are drawn with colored lines... see screenschots showing a modal dialog mask before and after doing drag and drop...
http://home.arcor.de/a.wuthcke/csdesktop01.pnghttp://home.arcor.de/a.wuthcke/csdesktop02.png
This problem only occurs in FireFox Mac, the version I use is 2.0.11, in FF Windows, IE 6 & 7 and Safari opacity stuff works fine for me.
I don't have the build no of my Ext-version, sorry...
Btw: Once the problem occured, also other Ext-Apps (like the Documentation) suddenly have this opacity problem and show those weird stripes.
Nobody has an Idea ? :-(
#If you have any other info about this subject , Please add it free.# |
