Results 1 to 4 of 4

Thread: Drag&Drop Zones inside Panel with scroll

  1. #1
    Sencha User
    Join Date
    Nov 2007
    Posts
    66
    Answers
    1

    Default Answered: Drag&Drop Zones inside Panel with scroll

    Hello,

    I have an application with a Viewport as a base component.

    My "center" element is:
    Code:
    Ext.apply(this, {region: 'center',
        autoScroll: true,
        items: [
            {id: 'test', xtype: 'panel', width: 25000, height: 350}
        ]
    });
    I'm trying to create the Drag and Drop zones, when this panel rendered:
    Code:
    initDragZone: function(cmp){
        new Ext.dd.DDTarget(cmp, 'objectsDDGroup');
    },
    
    initDropZone: function(cmp){
        var me = this;
        cmp.dropZone = Ext.create('Ext.dd.DropZone', cmp.getEl(), {
            /**
             * If the mouse is over a target node, return that node. This is
             * provided as the "target" parameter in all "onNodeXXXX" node event handling functions
             */
             getTargetFromEvent: function(e) {
                 return e.getTarget();
             },
             onNodeDrop: function(target, dd, e, data){
                 //Create new node in the DOM
                var html = '<div style="width: 100px;height: 100px;border: 1px solid red;"></div>',
                     node = Ext.DomHelper.append(target, html),
                     dd = new Ext.dd.DD(node, 'objectsDDGroup', {isTarget: false});
                
                return true;
            }
             .............
        });
    }
    Node successfully added, and everything works fine: I can drop element to the DropZone, then I can drag them inside the panel (actually only inside the screen size).

    The panel has scroll, because it has width = 25000. And I want to drag elements over the scrolling.
    But dragging stops when I tried to cross the line of my window size.

    Thanks.

  2. After debugging I have made next hack which works for me:

    Code:
    Ext.dd.DD.override({
        alignElWithMouse: function(el, iPageX, iPageY) {
            .......................
            if (!this.deltaSetXY) {
                vpSize = this.cachedViewportSize = { width: EL.getDocumentWidth(), height: EL.getDocumentHeight() };
                //Hack
                if(Ext.get(el).hasCls('dragObject')){
                    vpSize = this.cachedViewportSize = { width: 25000, height: EL.getDocumentHeight() };
                }
                .....................
            }
            .......................
        }
    });

  3. #2
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    101
    Answers
    8

    Default

    http://docs.sencha.com/ext-js/4-0/#!...ontainerScroll


    Looks to be what you're looking for....

  4. #3
    Sencha User
    Join Date
    Nov 2007
    Posts
    66
    Answers
    1

    Default

    sskow220,

    Thanks for the url, probably you are right.

    But I want to drag elements without additional proxy element. Something like here: http://www.sencha.com/blog/5-steps-t...p-with-ext-js/.
    But target container can has the scroll.

    I tried to add:
    Code:
    initDragZone: function(cmp){
        cmp.el.ddScrollConfig = {
            vthresh: 50,
            hthresh: 250,
            frequency: 100,
            increment: 200
         };
         Ext.dd.ScrollManager.register(cmp.el);
    },
    but without luck.

    Thanks.

  5. #4
    Sencha User
    Join Date
    Nov 2007
    Posts
    66
    Answers
    1

    Default

    After debugging I have made next hack which works for me:

    Code:
    Ext.dd.DD.override({
        alignElWithMouse: function(el, iPageX, iPageY) {
            .......................
            if (!this.deltaSetXY) {
                vpSize = this.cachedViewportSize = { width: EL.getDocumentWidth(), height: EL.getDocumentHeight() };
                //Hack
                if(Ext.get(el).hasCls('dragObject')){
                    vpSize = this.cachedViewportSize = { width: 25000, height: EL.getDocumentHeight() };
                }
                .....................
            }
            .......................
        }
    });

Tags for this Thread

Posting Permissions

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