Results 1 to 5 of 5

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

  1. #1
    Sencha Premium Member
    Join Date
    Dec 2012
    Posts
    29
    Answers
    3
    Vote Rating
    3
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    Is the dataview item setup as a drop target or is the dataview setup as the drop target?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha Premium Member
    Join Date
    Dec 2012
    Posts
    29
    Answers
    3
    Vote Rating
    3
      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
    Answers
    3
    Vote Rating
    3
      0  

    Default 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
    Answers
    3
    Vote Rating
    3
      0  

    Default 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')                            
                            }
                        });
                    }
    
                }
            });
    ...
        },

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
  •