Results 1 to 2 of 2

Thread: DragSource not work under IE

  1. #1

    Default DragSource not work under IE

    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.

  2. #2

    Default

    can anyone help me out about this issue?Thanks

Similar Threads

  1. Extjs 3.3.1 DragSource not work for IE
    By lelandlee in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 3 May 2011, 7:05 PM
  2. DragSource - suggest
    By fother in forum Community Discussion
    Replies: 0
    Last Post: 20 Feb 2009, 8:47 AM
  3. TreeNode as DragSource
    By dev_orion in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 14 Aug 2008, 12:38 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •