1. #1
    Sencha Premium Member
    Join Date
    Dec 2012
    Posts
    29
    Vote Rating
    2
    Answers
    3
    Dennis.Gearmesh is on a distinguished road

      0  

    Default Answered: How do I test if drop is on dataview item

    Answered: How do I test if drop is on dataview item


    Using ext js 4.1.3.

    I have two dataviews. I am able to drag and drop back and forth between the two. I am trying to figure out how to test if the drop event happens on a dataview item (as opposed to just the blank area of the dataview).

    It feels like I need to make each node a DropTarget, but the nodes are created from a <tpl>, so I don't see how that's an option.

    Here is the code in my controller that sets up the current DropTarget on one of the dataviews

    Code:
    ....
    onDesktopDataViewRender: function (v) { 
        v.dropTarget = Ext.create('Ext.dd.DropTarget', v.el, { 
            ddGroup: 'FromSearchToDesktop', 
            notifyDrop: function (source, e, dropData) { 
                 //Want do do something like: 
                 //if(dropped directly on any item) { 
                     //    do some logic with that item
                 //} 
                 //else {            
                       //    do the code below 
                      var recordAlreadyExists = false; 
                   
                      v.store.each(function (r) { 
                            if (r.data.ID == dropData.searchData.ID) { 
                                recordAlreadyExists = true;                    
                            } 
                       }); 
                   
                          if (recordAlreadyExists == false) { 
                               v.store.add(dropData.searchData);                
                          }  
                   //}end else 
                   } 
         });
    }
    ...
    Thanks!

  2. Yay! Finally figured this one out.
    The quick answer is to create a DropZone for the node. The long answer is how to do that.
    In my program, the user can drag items from DataView A to DataView B. After dropping the item in DataView B, the item appears in DataView B. On top of that, the user can drag an item from DataView A, and drop it on a node inside DataView B. The code needs to differentiate between the item being dropped on the DataView and the item being dropped on a node inside the DataView.
    Generic instructions:
    1. In DataViewB's onrender event, create a dropTarget with a ddGroup of "DataViewB"
    2. Inside the notifyDrop function, create a new node.
    3. Also inside the notifyDrop function, create another dropTarget (this one for the node instead of the DataView) with a ddGroup of "DataViewBNode".
    4. Inside DataViewA's onRender event, create a DragZone with a ddGroup of "DataViewBNode" (!important!)
    5. Inside of DataViewA's afterrender event, add the dragZone to the "DataViewB" group.
    Now you will be able to drag from DataViewA and drop in the white space of DataViewB to add a node, but you will also be able to drop directly on a node from DataViewB and do a different action.
    It's very important that the first ddGroup is for the node, and the one that's added in the afterrender event is for the DataView

    Here is the code for DataViewA
    Code:
    onDataViewARender: function (v) {
        var dataView = v;
    ...
        v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {
            ddGroup: 'DataViewBNode',   
            getDragData: function (e) {
                var sourceEl = e.getTarget(v.itemSelector, 10), d;
                if (sourceEl) {
                    d = sourceEl.cloneNode(true);
                    d.id = Ext.id();
                    return v.dragData = {
                        sourceEl: sourceEl,
                        repairXY: Ext.fly(sourceEl).getXY(),
                        ddel: d,
                        searchData: v.getRecord(sourceEl).data,
                        store: v.store,
                        source: 'DataViewA'
                    }
                }
            },
    
            getRepairXY: function () {
                return this.dragData.repairXY;
            }
        });
    },
    Here is the code for DataViewB

    Code:
    onDataViewBRender: function (v) {
            var dataView = v;
    
            v.dropTarget = Ext.create('Ext.dd.DropTarget', v.el, {
                ddGroup: 'DataViewB',
                notifyDrop: function (source, e, dropData) {
                    var recordAlreadyExists = false;
    
                    v.store.each(function (r) {
                        if (r.data.ID == dropData.searchData.ID && r.data.Type == dropData.searchData.Type) {
                            recordAlreadyExists = true;
                        }
                    });
    
                    if (recordAlreadyExists == false) {                        
                        v.store.add(dropData.searchData);
    
                        var nodes = v.container.dom.childNodes[0].childNodes;
                        var index = v.container.dom.childNodes[0].childNodes.length -1;
    
                        //
                        //Here is where you create the dropTarget for the new node
                        //
                        nodes[index].dropTarget = Ext.create('Ext.dd.DropTarget', nodes[index], {
                            ddGroup: 'DataViewBNode',
                            notifyDrop: function (source, e, dropData) {
                                console.log('success')                            
                            }
                        });
                    }
    
                }
            });
    ...
        },

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,641
    Vote Rating
    898
    Answers
    3573
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Is the dataview item setup as a drop target or is the dataview setup as the drop target?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha Premium Member
    Join Date
    Dec 2012
    Posts
    29
    Vote Rating
    2
    Answers
    3
    Dennis.Gearmesh is on a distinguished road

      0  

    Default


    The dataview is set up as the DropTarget. I just use a <tpl> to create the dataview item. Is there a way to make the <tpl> a DropTarget?

    Here is the dataview:

    Code:
    Ext.require('Client.store.DesktopStore');
    
    
    Ext.define('Client.view.DesktopDataView',
        {
            extend: 'Ext.view.View',
            alias: 'widget.DesktopDataView',
            config:
                {
                    store: Ext.create('Client.store.DesktopStore'),
                    tpl: '<tpl for=".">' +
                            '<div class="desktop-wrapper">' +
                                '<div class="desktop-icon">' +
                                    '<tplswitch="Type">' +
                                        '<tplcase="Person">' +
                                            '<img src="../../Images/icons/Person50x50.jpg" />' +
                                        '<tplcase="Family">' +
                                            '<img src="../../Images/icons/Family50x50.jpg" />' +
                                        '<tplcase="Household">' +
                                            '<img src="../../Images/icons/Household50x50.jpg" />' +
                                        '<tplcase="Church">' +
                                            '<img src="../../Images/icons/Church50x50.jpg" />' +
                                        '<tplcase="School">' +
                                            '<img src="../../Images/icons/School50x50.jpg" />' +
                                        '<tplcase="Business">' +
                                            '<img src="../../Images/icons/Business50x50.jpg" />' +
                                        '<tpldefault>' +
                                            '<img src="../../Images/icons/Household50x50.jpg" />' +
                                    '</tpl>' +
                                '</div>' +
                                '<div class="desktop-text">' +
                                    '<span class="title">{Title}</span>' +
                                    '<span class="address">{Address}</span>' +
                                    '<span class="info">{Info}</span>' +
                                '</div>' +
                            '</div>' +
                         '</tpl>',
                    itemSelector: 'div.desktop-wrapper',
                    emptyText: '',
                    singleSelect: true
                }
        }
    );

  5. #4
    Sencha Premium Member
    Join Date
    Dec 2012
    Posts
    29
    Vote Rating
    2
    Answers
    3
    Dennis.Gearmesh is on a distinguished road

      0  

    Default Any way to make <tpl> a drop target?

    Any way to make <tpl> a drop target?


    I'd sure love to know if someone can tell me a way to make the DataViewItem a dropTarget...

    Thanks.

  6. #5
    Sencha Premium Member
    Join Date
    Dec 2012
    Posts
    29
    Vote Rating
    2
    Answers
    3
    Dennis.Gearmesh is on a distinguished road

      0  

    Default Got it

    Got it


    Yay! Finally figured this one out.
    The quick answer is to create a DropZone for the node. The long answer is how to do that.
    In my program, the user can drag items from DataView A to DataView B. After dropping the item in DataView B, the item appears in DataView B. On top of that, the user can drag an item from DataView A, and drop it on a node inside DataView B. The code needs to differentiate between the item being dropped on the DataView and the item being dropped on a node inside the DataView.
    Generic instructions:
    1. In DataViewB's onrender event, create a dropTarget with a ddGroup of "DataViewB"
    2. Inside the notifyDrop function, create a new node.
    3. Also inside the notifyDrop function, create another dropTarget (this one for the node instead of the DataView) with a ddGroup of "DataViewBNode".
    4. Inside DataViewA's onRender event, create a DragZone with a ddGroup of "DataViewBNode" (!important!)
    5. Inside of DataViewA's afterrender event, add the dragZone to the "DataViewB" group.
    Now you will be able to drag from DataViewA and drop in the white space of DataViewB to add a node, but you will also be able to drop directly on a node from DataViewB and do a different action.
    It's very important that the first ddGroup is for the node, and the one that's added in the afterrender event is for the DataView

    Here is the code for DataViewA
    Code:
    onDataViewARender: function (v) {
        var dataView = v;
    ...
        v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {
            ddGroup: 'DataViewBNode',   
            getDragData: function (e) {
                var sourceEl = e.getTarget(v.itemSelector, 10), d;
                if (sourceEl) {
                    d = sourceEl.cloneNode(true);
                    d.id = Ext.id();
                    return v.dragData = {
                        sourceEl: sourceEl,
                        repairXY: Ext.fly(sourceEl).getXY(),
                        ddel: d,
                        searchData: v.getRecord(sourceEl).data,
                        store: v.store,
                        source: 'DataViewA'
                    }
                }
            },
    
            getRepairXY: function () {
                return this.dragData.repairXY;
            }
        });
    },
    Here is the code for DataViewB

    Code:
    onDataViewBRender: function (v) {
            var dataView = v;
    
            v.dropTarget = Ext.create('Ext.dd.DropTarget', v.el, {
                ddGroup: 'DataViewB',
                notifyDrop: function (source, e, dropData) {
                    var recordAlreadyExists = false;
    
                    v.store.each(function (r) {
                        if (r.data.ID == dropData.searchData.ID && r.data.Type == dropData.searchData.Type) {
                            recordAlreadyExists = true;
                        }
                    });
    
                    if (recordAlreadyExists == false) {                        
                        v.store.add(dropData.searchData);
    
                        var nodes = v.container.dom.childNodes[0].childNodes;
                        var index = v.container.dom.childNodes[0].childNodes.length -1;
    
                        //
                        //Here is where you create the dropTarget for the new node
                        //
                        nodes[index].dropTarget = Ext.create('Ext.dd.DropTarget', nodes[index], {
                            ddGroup: 'DataViewBNode',
                            notifyDrop: function (source, e, dropData) {
                                console.log('success')                            
                            }
                        });
                    }
    
                }
            });
    ...
        },

Thread Participants: 1

Tags for this Thread