PDA

View Full Version : [SOLVED]Highlight grid row before drop action for dd



josh803316
6 Jun 2008, 12:54 PM
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.

para
6 Jun 2008, 5:38 PM
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...)

josh803316
6 Jun 2008, 6:16 PM
I found the notifyOver event in my custom GridReorderDropTarget. I should be able to do something with that.



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;
}

.......

para
6 Jun 2008, 6:34 PM
Exactly. Good find. Post the code when it's done? (or if you need help, obviously)

josh803316
6 Jun 2008, 7:03 PM
I'm almost there....but I'm having trouble finding the target rowIndex.



.....
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";
}
....

josh803316
7 Jun 2008, 12:21 PM
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....



.......
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 (typeof t != 'undefined') {
if (dropDom.childNodes[dataView]) {
dropDom.childNodes[dataView].style.backgroundColor = "green";
}

}

}
..........

para
7 Jun 2008, 2:29 PM
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


if (data.grid.highlightedDropDom) {
data.grid.highlightedDropDom.style.backgroundColor = '';
}

josh803316
7 Jun 2008, 2:41 PM
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.

josh803316
7 Jun 2008, 2:48 PM
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?