1. #1
    Sencha User
    Join Date
    Dec 2013
    Posts
    84
    Answers
    6
    Vote Rating
    48
    Malte123 is infamous around these parts Malte123 is infamous around these parts

      0  

    Default Unanswered: DnD: onInvalidDrop ignores dropGroup

    Unanswered: DnD: onInvalidDrop ignores dropGroup


    I am at the beginning of my DnD-Experiences ... so maybe I did stupid mistakes ??!

    But based on the book "Learning Ext JS 4" (Packt Publishing) and its working example code I try to understand how it works. The Example works - but the Integration into my little Project doesn't work fine.

    In my opinion if a Container or another Component is configured with dropGroup: 'DnDGroupName' it should accept Items with same draggGroup: 'DnDGroupName' ?

    But I get fired onInvalidDrop every time ... every time ! Also if I lay down the selected Item where I take it up. The own Panel the Item is in is also in the same dropGroup.

    If I use Ext.create('Ext.dd.DDTarget', this.el, 'DnDGroupName'); for my target, in my opinion I do not need to put it into a global var like overrides or dd ... I think this.el should get a DDTarget-Addon by this ? - isn't it ? (But also if I do Ext.apply(dd, overrrides); it doesn't help...)
    But I cannot see this expected DDTarget if I do console.log(...) ... neither in examples nor in my code.
    Where can I take a look for this ?

    Also my Panels do not dragg around their content - they only take the panel itself dragging around over the hole screen.

    It is possible the problem causes by crazy Component-Generation on the fly (main reason I do not post code - 800 LOCs).

    How can I find out with Browser-Debugging the DOM-Areas are drop able?
    If I do console.log(this) in afterRender of the Component, I cannot find any dd and so on - only config like dropGroup: 'DnDGroupName'.
    In my opinion I should see something more than config only?
    In the DOM I cannot find a difference (like a class) between drop Containers/Panels and nonDropTargets... (maybe I didn't search good enough).

    I think I need a little brainwash ...

    I am running around my circle - hope for help getting out there



    (I vote up answers ans also select best answers !)

  2. #2
    Sencha User
    Join Date
    Nov 2012
    Posts
    105
    Answers
    4
    Vote Rating
    5
    Kevin Jackson is on a distinguished road

      2  

    Default


    I'm unclear whether you are dragging content or containers from your post.

    Several options are available below. Perhaps you could point out what you are trying to accomplish

    I don't have that particular book so unsure what the example in it shows.

    Here are some examples with code that might get you headed in the right direction
    http://dev.sencha.com/deploy/ext-4.0...d_to_grid.html
    http://dev.sencha.com/deploy/ext-4.0...formpanel.html

    There are also several drag and drop examples and the code here as well
    http://examples.extjs.eu/

  3. #3
    Sencha User
    Join Date
    Dec 2013
    Posts
    84
    Answers
    6
    Vote Rating
    48
    Malte123 is infamous around these parts Malte123 is infamous around these parts

      0  

    Default


    Thanks for thinking about my Problem

    I have decided to shop some Screenshots - There is Copyrighted Material from Decipher Inc in - I will erase this later. But it is important for showing what I have done.
    DnD1.jpg
    NOTE: Before dragging the Panel, it is a Game-Card like the others ! (after dragging it leaves like you can see on the image - also if I dragg it in the middle of the green area)

    The above Area was a Panel and now it is a Ext.Container (I tryed a lot thinks ...)
    It is the first Item of the main window Ext.Viewport
    PHP Code:
                    ,flex3
                    
    ,xtype         'drop.container'
                    
    ,ddGroup          'cardDnDGroup'
                    
    ,enableDragDrop   true
                    
    ,dropGroup'cardDnDGroup' 

    under this there is a heavy generated Part with items of Type Panel - Reason: Before I try this, I had Problems because of http://www.sencha.com/forum/showthread.php?262844 (BUG: DataView.Draggable => Short: Multiple DataViews cannot be draggable at the moment...)

    I'm unclear whether you are dragging content or containers from your post.
    So glopes (thanks once more!) helped me to find my way to make my DataViews from DOM to Panel here: http://www.sencha.com/forum/showthread.php?279046 (reason: Only Panels can leave there Container... I learned now)

    Here are some console.log(this) outputs from Dragging-Action:
    DnD2.jpg
    DnD3.jpg
    DnD4.jpg

    Also after dragging the DOM of the dragged Panel looks like this:

    PHP Code:
    <div class="x-panel x-panel-ghost x-layer x-panel-default x-border-box" id="panel-1103" style="z-index: 19000; width: 64px; height: 98px; right: auto; left: 564px; top: 89px; " aria-labelledby="panel-1103_header_hd" tabindex="-1"><div class="x-panel-header x-header x-header-horizontal x-docked x-unselectable x-panel-header-default x-horizontal x-panel-header-horizontal x-panel-header-default-horizontal x-top x-panel-header-top x-panel-header-default-top x-docked-top x-panel-header-docked-top x-panel-header-default-docked-top x-header-ghost" id="panel-1103_header" style="right: auto; left: 0px; top: 0px; width: 64px; "><div id="panel-1103_header-body" class="x-header-body x-panel-header-body x-panel-header-body-default x-panel-header-body-horizontal x-panel-header-body-default-horizontal x-panel-header-body-top x-panel-header-body-default-top x-panel-header-body-docked-top x-panel-header-body-default-docked-top x-box-layout-ct x-panel-header-body-default-horizontal x-panel-header-body-default-top x-panel-header-body-default-docked-top" style="width: 52px; "><div id="panel-1103_header-innerCt" class="x-box-inner " role="presentation" style="width: 52px; height: 16px; "><div id="panel-1103_header-targetEl" class="x-box-target" style="width: 52px; "><div class="x-component x-header-text-container x-panel-header-text-container x-panel-header-text-container-default x-box-item x-component-default" unselectable="on" id="panel-1103_header_hd" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; right: auto; left: 0px; top: 0px; width: 35px; "><span id="panel-1103_header_hd-textEl" class="x-header-text x-panel-header-text x-panel-header-text-default" unselectable="on">&nbsp;</span></div><div class="x-tool x-box-item x-tool-default x-tool-after-title x-tool-pressed" style="width: 15px; height: 15px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; right: auto; left: 37px; top: 0px; " id="tool-1104"><img role="presentation" id="tool-1104-toolEl" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-img x-tool-placeholder"></div></div></div></div></div><div id="panel-1103-body" class="x-panel-body x-panel-body-default x-panel-body-default" style="width: 64px; height: 73px; left: 0px; top: 25px; "><span id="panel-1103-outerCt" style="display: table; width: 100%; table-layout: fixed; height: 71px; "><div id="panel-1103-innerCt" style="display:table-cell;height:100%;vertical-align:top;" class=""></div></span></div></div
    Because it is possible the Problem causes from heavy generating the Gamezone-Panels within the Card-Panels, I will post the loop generates the final Starting-Page you can see above (of cause the befor dragging version )

    PHP Code:
    deckzones.each(function(record){
            
            var 
    deckzoneName record.internalId;
            
    Ext.define(deckzoneName+'CardView',{
    //             extend     : 'Ext.Container', // I played around ...
                 
    extend     'Ext.panel.Panel',
    //             extend     : 'Ext.view.View', // I played around ...
                    
    alias   'widget.dnd.'+deckzoneName+'cardView',
                
    xtypedeckzoneName+'cardView',
                
    dropGroup'cardDnDGroup',

                
    iddeckzoneName+'CardView',
                
    dataExt.getStore(deckzoneName+'Store'),//'Deck',
             //    singleSelect: true,
             //    draggable: true, // I played around ... YES I could move around the Gamezones ;-)
                
    tpl: [
                    
    '<tpl for=".">',
                        
    '<script>',
                        
    '["card-{[values.data.uniqueCardObjectId]}","'+Config.Client.imageBaseUrl[0]+'/{[values.data.id]}.jpg"]',
                        
    '</script>',
                        
    '<div class="card" id="card-{[values.data.uniqueCardObjectId]}" height="96" width="64">',
                            
                        
    '</div>',
                    
    '</tpl>'
                
    ].join(''),

                
    afterRender:function(){  // AFTER RENDER !!!
                      
    var me thiscontainer;
                    
    this.callParent(arguments);    
                    
    container Ext.get(me.el.id).select('div.card');     
                    var 
    dd Ext.create('Ext.dd.DDTarget'me.el'cardDnDGroup', {
                            
    isTarget      true
                        
    });
                 
    //   Ext.apply(dd, overrides);
                     
    script Ext.get(me.el.id).select('script'); // get the needed Datas hold in DOM
                     
    Ext.each(script.elements, function(scriptEl){
                        var 
    arr1 = [];
                        
    arr1 = eval(scriptEl.childNodes[0].data);
                    
    // here we are going to generate each Card AS A PANEL so it can be dragged out of their container
                        
    var pan Ext.create('Ext.panel.Panel',{
                            
                                
    draggGroup'cardDnDGroup',
                                
    //Ext.create('Ext.draw.Component', {  // given up - is BETA Code
                            //    require: ['Ext.util.Point'],
                                
    ddGroup'cardDnDGroup',
                             
    //   groups: {'cardDnDGroup': true},
                                
    draggable:{
                                    
    b4startDrag    : function(e){ // isn't used
                                    
    console.log('b4startDrag');
                                    
    console.log(this);

                                    if (!
    this.el) {
                                           
    this.el Ext.get(this.getEl());
                                    }    

                                    
    this.el.addCls('selected');
                                    
    this.initialPosition this.el.getXY();
                                },
    startDrag    : function(e){ // affectes !
                                    
    console.log('startDrag');
                                    
    console.log(this);

                                    if (!
    this.el) {
                                           
    this.el Ext.get(this.getEl());
                                    }    

                                    
    this.el.addCls('selected');
                                    
    this.initialPosition this.el.getXY(); // doesn't do anything ?
                                
    },
                             
                                
    onStartDrag    : function(e){ // isn't used
                                    
    console.log('onStartDrag');
                                    
    console.log(this);

                                    if (!
    this.el) {
                                           
    this.el Ext.get(this.getEl());
                                    }    

                                    
    this.el.addCls('selected');
                                    
    this.initialPosition this.el.getXY();
                                },
                                
    onDrag    : function(e){ // works ...
                                    
    console.log('onDrag');
                                    
    console.log(this);
                                
                                },
                                
    onDragEnter : function(eid) { // isn't used
                                    
    console.log('onDragEnter');
                                },
                                
    onDragOver : function(eid) { // isn't used
                                    
    console.log('onDragOver');
                                },
                                
    onDragOut : function(eid) { // isn't used
                                    
    console.log('onDragOut');
                                },
                                
    onDragDrop : function(eid) { // isn't used
                                    
    var me this;
                                    
    console.log('onDragDrop');
                                    var 
    dropEl Ext.get(id);
                                    
                                    if(
    this.initialPosition != this.el.getXY()){ //if the initial position is diferent from the actual when finishing dragging
                                        
    console.log("this.initialPosition != this.el.getXY()");
                                        
    console.log(this.initialPosition +' != 'this.el.getXY());
                                        
    this.onInvalidDrop();
                                    }        
                                    if (
    me.el.dom.parentNode.id != id) {
                                        
    console.log("onDragDrop me.el.dom.parentNodeId != id: "+me.el.dom.parentNode.id)
                                        
    dropEl.appendChild(this.el);
                                        
    me.onDragOut(eid);
                                    }
                                    else{
                                        
    console.log("else");    
                                        
    this.onInvalidDrop();
                                   }
                                },
                                
    onInvalidDrop : function() {    // 
                                    
    var me this;
                                    
    console.log('onInvalidDrop');                        
                                    
    me.el.removeCls('selected');
                                    
    console.log(this);
                                
    me.el.setXY({xthis.startPageXythis.startPageY},true); // DOES NOT WORK
                                //    me.el.moveTo(this.initialPosition[0], this.initialPosition[1]); // return the object to its original position: DOES NOT WORK
                                
    },
                                
    endDrag : function() {
                                    
    console.log('endDrag');
                                    
    this.el.highlight();
                               }
                                },
                        
    //        width: 64,
                        //        height: 96,
                            //  draggable: true,

                            
    renderToExt.get(arr1[0]),
                            
    //    html: '<img src="'+Config.Client.imageBaseUrl[0]+'/{[values.data.id]}.jpg"  height="96" width="64">',
                                    
    html'<img src="'+arr1[1]+'"  height="96" width="64">',
                        
    /*    items: [{ // old code experimenting with draw.sprite: BETA CODE I think !
                                type: "image",
                                src: arr1[1],
                                width: 64,
                                height: 96
                            }],*/
                                
    beforeRender: function(){
                                    
    console.log("beforeRender sprite");
                                    
    console.log(this);
                                }
                            });
    //.show();
                        //Ext.DomHelper.insertAfter(arr1, pan);
                    //    console.log(pan.body.dom);
                        //Ext.get(arr1[0]).insertHtml('beforeBegin',pan.body.dom);
                    //    Ext.get(arr1[0]).setHTML(pan.body.dom);
                    
    }) 
    I tried to put in only the important parts - It is really a lot stuff - sorry for large Comment
    If you have no solution or doesn't see any mistakes: Please tell me your thoughts - I know this is to big to solve it over simple discussions - it is no basic question.
    But in the last Posts it helps a lot when someone (like glopes) only tell me his thoughts
    Thanks for taking the Time !
    DnD5.jpg
    tiny Sequenz-Diagramm to see what happens in the short.

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi