Results 1 to 9 of 9

Thread: [SOLVED]Highlight grid row before drop action for dd

  1. #1

    Default [SOLVED]Highlight grid row before drop action for dd

    Has anyone implemented a drag-drop highlight for the row that the user is hovering over or about to drop onto. Visually it would make it a lot more obvious exactly where the drop is going to occur.

  2. #2
    Ext User para's Avatar
    Join Date
    Apr 2007
    Location
    Redmond, WA
    Posts
    918

    Default

    Shouldn't be terribly hard. I don't have a DD grid handy to play with, but look for a function or event like 'isValidDrop'.
    In that function/handler you could easily get the rows that you are dropping between and change their classes.

    You'd have to make sure to remove the classes also, which may prove more difficult.
    (keep a list of affected rows? attempt to remove custom class from all rows in the handler? many other ways to do it...)

  3. #3

    Default

    I found the notifyOver event in my custom GridReorderDropTarget. I should be able to do something with that.

    Code:
    Ext.ux.dd.GridReorderDropTarget = function(grid, config) {
    ........
            notifyOver: function(dd, e, data) {
                var t = Ext.lib.Event.getTarget(e);
                var rindex = this.grid.getView().findRowIndex(t);
                if (rindex == data.rowIndex) {rindex = false;}
    
                return (rindex === false)? this.dropNotAllowed : this.dropAllowed;
            }
    
    .......

  4. #4
    Ext User para's Avatar
    Join Date
    Apr 2007
    Location
    Redmond, WA
    Posts
    918

    Default

    Exactly. Good find. Post the code when it's done? (or if you need help, obviously)

  5. #5

    Default

    I'm almost there....but I'm having trouble finding the target rowIndex.

    PHP Code:
    .....
    var 
    ddrow = new Ext.dd.DropTarget(grid, {
                    
    ddGroup 'testDDGroup',
                    
    copy:false,
                    
    notifyOver: function(dd,e,data){ 
                        var 
    drop dd.cachedTarget;
                        
    drop.el.dom.childNodes[-->NEEDTOFINDTHIS<--].style.backgroundColor "green"
                    }
    .... 

  6. #6

    Default

    Ok, after some struggles I've almost got it.....or at least I'm a lot closer. I can now find and highlight the associated drop target or change the style of the background of the row I'm hovering over which is what I want, but after I leave the row it is of course still highlighted which is not what I want.

    I'm not sure how to handle the part where I am no longer moused over. Do I need to modify the custom grid code to handle this event? I'm sure there are several ways to do this just not sure which is the easiest or best....

    PHP Code:
    .......
    var 
    ddrow = new Ext.dd.DropTarget(grid, {
             
    ddGroup 'testDDGroup',
              
    copy:false,
            
    notifyOver: function(dd,e,data){     
                var 
    drop dd.cachedTarget;
                var 
    Ext.lib.Event.getTarget(e);
                var 
    dataView data.grid.getView().findRowIndex(t);
                var 
    dropDom drop.el.dom;
                if (
    typeof t != 'undefined') {
                        if (
    dropDom.childNodes[dataView]) {
                            
    dropDom.childNodes[dataView].style.backgroundColor "green";
                        }
                                
                } 
                        
            }
    .......... 

  7. #7
    Ext User para's Avatar
    Join Date
    Apr 2007
    Location
    Redmond, WA
    Posts
    918

    Thumbs up

    Code:
    var ddrow = new Ext.dd.DropTarget(grid, {
    
             ddGroup : 'testDDGroup',
    
              copy:false,
    
            notifyOver: function(dd,e,data){     
    
                var drop = dd.cachedTarget;
    
                var t = Ext.lib.Event.getTarget(e);
    
                var dataView = data.grid.getView().findRowIndex(t);
    
                var dropDom = drop.el.dom;
    
                if (data.grid.highlightedDropDom) {
                            data.grid.highlightedDropDom.style.backgroundColor = '';
                }
    
                if (typeof t != 'undefined') {
    
                        if (dropDom.childNodes[dataView]) {
    
                            data.grid.highlightedDropDom = dropDom.childNodes[dataView];
                            dropDom.childNodes[dataView].style.backgroundColor = "green";
    
                        }
    
                                
    
                } 
    
                        
    
            }
    also in the afterDrop? function, you can add
    Code:
                if (data.grid.highlightedDropDom) {
                            data.grid.highlightedDropDom.style.backgroundColor = '';
                }

  8. #8

    Default

    Thanks so much, that worked perfectly. I imagine a lot of people would like this effect during drag-drop....making it very easy to see where the drop will happen. I really appreciate your help.

  9. #9

    Default

    Oops, one last thing....for some reason, while I'm dragging the "drop ok" green notifier isn't there (shows the red no drop indicator) despite it being a valid drop zone. Do I have to set this initially at the beginning of notifyDrop?

Posting Permissions

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