Drag and drop in dataGrid, custom cursor during drag not working

Question

I have a datagrid that I want the user to sort the rows on. To make it obvious that it's sortable I am implementing some custom cursors. But I'm having a problem when I actually drag an item.

here's a pseudo demonstration of the problem

Application = normal cursor // fine

Rollover datagrid = open hand cursor // good so far

mousedown on datagrid = closed hand cursor // good

dragging item around = closed hand cursor // switches back to normal cursor (if I move it around real fast I can see my custom curser for an instant)

mouse up on datadrid = open hand cursor // not sure, after I drop it goes back to open hand but if I mouse down, dont move and mouse up I have a closed hand

rollout of datagrid = normal cursor //good

datagrid code:

<mx:DataGrid id="sectQuestionsDG" x="10" y="204" width="558" height="277" headerHeight="0" selectable="{editMode}"
dragMoveEnabled="{editMode}" dragEnabled="{editMode}" dropEnabled="{editMode}"
dragDrop="sectQuestReOrder(event);" rollOver="over();" mouseDown="down();" mouseUp="up();" rollOut="out();"/>

functions:

public function over():void{
CursorManager.setCursor(grabCursor,CursorManagerPriority.LOW,0,0);
}
public function down():void{
CursorManager.setCursor(grabbingCursor,CursorManagerPriority.HIGH,0,0);
}
public function up():void{
CursorManager.setCursor(grabCursor,CursorManagerPriority.LOW,0,0);
}
public function out():void{
CursorManager.removeAllCursors();
}

Edit 12/17/09: I've made a little bit of progress, I'm now doing this on rollOver

var styleSheet:CSSStyleDeclaration = StyleManager.getStyleDeclaration("DragManager");
styleSheet.setStyle("moveCursor", grabbingCursor);
CursorManager.setCursor(grabCursor,CursorManagerPriority.LOW);

This is giving me the correct rollover and correct drag, but if I try to add any function to rollOut it screws up again, so now I'm stuck with the grabCursor. It seems like when I set a rollOut on the dataGrid it's firing for each row, same with mouseOut, is there any way to avoid that?

Edit 12/21/09: It is a confirmed thing that roll/mouse out/over fire for every item in the datagrid. The solution I need is how to prevent that and only fire it when the user mouses out of the datagrid as a whole. I need flex to see the forest, not the trees.

PS. the rollout only fires on every item when I am dragging. mouseout fires on every item regardless

EDIT 12/21/09, End of the day:
I have managed to answer my own question so my bounty rep is lost to me :-( Anyway since my answer solves my problem I will award the bounty to anyone that can answer this. My solution uses AS to remove the the rollOut/rollOver while a user is dragging. In a dataGrid. How can you get the same result without removing the rollOut/rollOver (so that rollOut is not firing for each item as you drag another item over it)?

What is the framerate on your movie? I've seen mouseOut events fire if my framerate was really low, like 12. Try bumping it up to 30. — Jeremy White
bumped up to 60 and it still fires a mouseout/rollout for every item of the datagrid instead of the grid as a whole. — invertedSpear

Patrick Patrick · Accepted Answer · 2009-12-23T01:38:38

Why not use the property isDragging of DragManager if you are doig a drag you dont need to change the cursor. And dont forget to check for the dragExit event in case you drop outside the datagrid.

N.B sometimes the cursor keep with the dragging shape after the drop so you can in your sectQuestReOrder remove the cursor and set it back to over state.

sample:

public function over(evt:Event):void{ //on mouse over, added with AS
  if (DragManager.isDragging) // you are dragging so no cursor changed
   return;

  CursorManager.removeAllCursors();
  CursorManager.setCursor(grabCursor,CursorManagerPriority.LOW,-7,-7);
  var styleSheet:CSSStyleDeclaration = StyleManager.getStyleDeclaration("DragManager");
  styleSheet.setStyle("moveCursor",grabbingCursor); //style set for the drag cursor
}
public function down(evt:Event):void{ // on mouse down
    CursorManager.removeAllCursors();
    CursorManager.setCursor(grabbingCursor,CursorManagerPriority.LOW,-7,-7);     
}
public function up(evt:Event):void{
    CursorManager.removeAllCursors();
    CursorManager.setCursor(grabCursor,CursorManagerPriority.LOW,-7,-7);
}
public function out(evt:Event):void{
 if (DragManager.isDragging) // you are dragging so no cursor changed
  return;
 CursorManager.removeAllCursors();
}
public function sectQuestReOrder(e:Event):void{
    // sometime you will be stuck with the moving cursor
    // so after the drop done reset cursor to what you want
 CursorManager.removeAllCursors();
 CursorManager.setCursor(grabCursor,CursorManagerPriority.LOW,-7,-7);
 ...
}
public function onDragExit(e:Event):void {
    // in case you go out of the datagrid reset the cursor
    // so when you do a drop outside you ll not get one of your dragging cursor
 CursorManager.removeAllCursors();
}

And in your grid add dragExit

 <mx:DataGrid 
      id="sectQuestionsDG" 
      x="10" y="204" width="558" height="277" headerHeight="0" 
      selectable="{editMode}"
      dragExit="onDragExit(event)"
      dragMoveEnabled="{editMode}" 
      dragEnabled="{editMode}"
      dropEnabled="{editMode}"
      dragDrop="sectQuestReOrder(event);" 
      rollOver="over(event);" 
      mouseDown="down(event);" 
      mouseUp="up(event);" 
      rollOut="out(event);"/>

Drag and drop in dataGrid, custom cursor during drag not working

3 Answers