Wednesday, May 6, 2009

Strange YUI Drag Drop onInvalidDrop IE Quirk

I am doing some Javascript drag drop in my application using YUI

I extend DDProxy as in the samples. If the drop is invalid, I want it to revert to the original position. The following works in chrome and firefox but not Internet Explorer 7:


startDrag: function(x, y) {
this.startPos = Dom.getXY(this.getEl());
Dom.setStyle(this.getEl(), "visibility", "hidden");
...

onInvalidDrop: function(e) {
Dom.setStyle(this.getEl(), "visibility", "");
Dom.setXY(this.getEl(), this.startPos);
}


On IE, the DDProxy is left where the drag ends. After some experimentation, I found the following works:


startDrag: function(x, y) {
this.startPos = Dom.getXY(this.getEl());
...

onInvalidDrop: function(e) {
Dom.setStyle(this.getEl(), "visibility", "");
var code = "YAHOO.util.Dom.setXY('" + this.getEl().id + "', [" + this.startPos + "]);";
setTimeout(code,.1);
}


With further trial/error, I settled on the following solution:


startDrag: function(x, y) {
this.startPos = Dom.getXY(this.getEl());
...

endDrag: function(x, y) {
},
onInvalidDrop: function(e) {
Dom.setStyle(this.getEl(), "visibility", "");
Dom.setXY(this.getEl(), this.startPos);
}


Fun!

No comments:

Post a Comment