PDA

View Full Version : DragSource not work under IE



lelandlee
17 Apr 2011, 5:26 PM
Here is the javascript code:


Ext.onReady(function(){
function checkBoundary(vPanel, dragEl, x, y, w, h)
{
var miny = bgPanel.getEl().getTop();
var minx = bgPanel.getEl().getLeft();
var maxY = miny + bgPanel.getEl().getHeight();
var maxX = minx + bgPanel.getEl().getWidth();
vPanel.setX(x);
vPanel.setY(y);
dragEl.setX(x);
dragEl.setY(y);
//check position
if (x < minx)//left exceed
{
vPanel.setX(minx);
dragEl.setX(minx);
}
if (y < miny)
{
vPanel.setY(miny);
dragEl.setY(miny);
}
if (x + w > maxX)
{
vPanel.setX(maxX - w);
dragEl.setX(maxX - w);
}
if (y + h > maxY)
{
vPanel.setY(maxY - h);
dragEl.setY(maxY - h);
}
}

function checkSize(thisResizer, w, h, e)
{
var vPanel = thisResizer.getEl();
var vPanelX = vPanel.getX();
var vPanelY = vPanel.getY();
var miny = bgPanel.getEl().getTop();
var minx = bgPanel.getEl().getLeft();
var maxY = miny + bgPanel.getEl().getHeight();
var maxX = minx + bgPanel.getEl().getWidth();
if (vPanelX < minx)
{
vPanel.setX(minx);
vPanel.setWidth(w - (minx - vPanelX));
}
if (vPanelY < miny)
{
vPanel.setY(miny);
vPanel.setHeight(h - (miny - vPanelY));
}
if (vPanelX + w > maxX)//resize exceed right
{
vPanel.setWidth(maxX - vPanel.getX());
}
if (vPanelY + h > maxY)
{
vPanel.setHeight(maxY - vPanel.getY());
}
}

var bgPanel = new Ext.Panel({
id : 'bgPanel',
width : 720,
height : 480,
draggable : false,
// autoSize:true,
renderTo : 'panel',
cls : 'panel',
html : "<img src='' style='width:100%;height:100%' title='' alt='' id='bgImg'/>"
});
bgPanel.show();

var tmpVideoPanel = new Ext.Panel({
id : 'video_0',
width : '100px',
height : '100px',
html : 'video_0',
draggable : true,
cls : 'bgArea',
shadow : true,
shadowOffset : 0,
pinned : true
});

tmpVideoPanel.setSize(100, 100);
bgPanel.add(tmpVideoPanel);
bgPanel.doLayout();
tmpVideoPanel.getEl().setLeft(0);
tmpVideoPanel.getEl().setTop(0);

var resizer = new Ext.Resizable(tmpVideoPanel.getEl(), {
pinned: false,
animate: false,
handles: 'all',
draggable:true,
disableTrackOver: true
});

resizer.on('resize', checkSize);

var proxy = new Ext.dd.DragSource('video_0', {
group : 'dd',
resizeFrame:false,
isTarget:false,
centerFrame:true,
maintainOffset:true
});
proxy.onStartDrag = function(x, y)
{
this.setDelta(0, 0);
this.setDragElPos(x, y);
this.getProxy().hide(true);
var vPanel = Ext.get(proxy.getEl());
var dragEl = Ext.get(proxy.getDragEl());
vPanel.setX(x);
vPanel.setY(y);
dragEl.setX(x);
dragEl.setY(y);
};

proxy.onDrag = function(e)
{
var vPanel = Ext.get(proxy.getEl());
var dragEl = Ext.get(proxy.getDragEl());
var x = e.getXY()[0];
var y = e.getXY()[1];
var w = vPanel.getWidth();
var h = vPanel.getHeight();
checkBoundary(vPanel, dragEl, x, y, w, h);
};
proxy.afterDragDrop = function(target, e, id)
{
};
var target = new Ext.dd.DDTarget('bgPanel', 'dd');
});

This code work correctly under firefox and chrome(any edition), but not work under IE when drag the panel.

Can anyone help me out about this issue? Thanks.

lelandlee
20 Apr 2011, 3:15 PM
can anyone help me out about this issue?Thanks