PDA

View Full Version : Panel as DragSource works in FF & Safari but not in IE8



sulfur
4 Apr 2011, 1:02 PM
Hi all,

I'm writing an app that has draggable child panels inside parent panels. For some reason DD does not work in IE8 but is fine in FF or Safari. Unfortunately IE8 will be our primary supported browser.

FF: on drag the browser shows the green (ok) and red (nodrop) CSS icons
IE8: on drag these icons are noticably missing and the notifyDrop event is not fired

Here's some stripped down barebone code of what I am trying to achieve. As you can see this should be pretty straightforward but I'm not having any luck with IE8 at all. Seems like IE8 is ignoring the DragSource altogether.

Any help will be greatly appreciated!

ps. Hope code formats ok. 1st time posting here. I've tried formatting it a couple times with spaces but it shows up weird in preview. And the Go Advanced button gave me a javascript error. ('PATHS' is undefined)

.html code:

<body>

<divid="canvas"></div>
</body>


.js code:


Ext.onReady(function () {
var parentPanel = new Ext.Panel({
title: 'Parent',
width: 500,
height: 300,
renderTo: 'canvas',
listeners: {
render: function (panel) {
var dropTarget = new Ext.dd.DropTarget(panel.body, {
ddGroup: 'myDDGroup',
notifyDrop: function (dragSource, e, dragData) {
alert(dragSource.id + ' dropped');
}
});
}
},
items: [{
id: 'child1',
xtype: 'panel',
title: 'Child Panel 1',
width: 500,
height: 80,
draggable: true
}, {
id: 'child2',
xtype: 'panel',
title: 'Child Panel 2',
width: 500,
height: 80,
draggable: true
}, {
id: 'child3',
xtype: 'panel',
title: 'Child Panel 3',
width: 500,
height: 80,
draggable: true
}]
});


new Ext.dd.DragSource(Ext.getCmp('child1').getEl(), {
ddGroup: 'myDDGroup'
});
new Ext.dd.DragSource(Ext.getCmp('child2').getEl(), {
ddGroup: 'myDDGroup'
});
new Ext.dd.DragSource(Ext.getCmp('child3').getEl(), {
ddGroup: 'myDDGroup'
});


});

sulfur
5 Apr 2011, 3:01 PM
FYI I tried another approach and instead of setting draggable: true and then creating a DragSource for each child panel, I defined draggable config like this for the child panels:



draggable: {
ddGroup: 'myDDGroup'
}


This works in both IE8 & FF but now the dropAllowed & dropNotAllowed CSS icons do not appear in either browser.

Suggestions?

sulfur
5 Apr 2011, 4:43 PM
This is an FYI for those who may be interested. I figured out what was happening.

Setting 1) draggable: true and 2) new Ext.dd.DragSource() on the same child panel does not work in IE8.

In IE8, if your child panel has a title, the DragSource is applied to the body only (whereas FF applies it to both head & body of the panel). If it doesn't have a title, in IE8 the DragSource is unavailable, perhaps masked by the proxy created by "draggable: true"?

I'm not sure if it's an IE8 or Ext issue. But the solution is to remove "draggable: true" in the child panel definition, and define the DragSource only.

Works fine in both FF & IE8 now. :)