views:

588

answers:

3

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)?

Original 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. Can anyone help me out?

Thanks

here's a psuedo 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

+1  A: 

I would look at the mouseOut event and determine if its firing when you're moving the mouse during a drag. I have seen cases where the dragged object doesn't move exactly with the mouse, and for a short while, the mouse is actually hovering over another object (causing the mouseOut event to fire, thus changing the cursor).

Gabriel McAdams
That's the problem, rollout and mousout fire for every row in a datagrid, how do i get it to only fire for the grid as a whole?
invertedSpear
A: 

OK some props to Gabriel there for getting my mind out of a rut and back into this problem in full mode. I had to go through a few steps to get to my answer

1)remove the listeners for rollOver, rollOut, and mouseUp from the mxml and add rollOver and rollOut through the addEventListener method in AS

2) add the listener dragComplete to the mxml and assign the function previously assigned to mouseUP to it

3) change the main function to this:

public function over(evt:Event):void{ //on mouse over, added with AS
    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);
    sectQuestionsDG.removeEventListener(MouseEvent.ROLL_OVER,over);
    sectQuestionsDG.removeEventListener(MouseEvent.ROLL_OUT,out);
    //this is why I had to take it off the mxml, can only remove listeners
    //added with the addEventListener, I don't remember where I read that.
}
public function up(evt:Event):void{
    CursorManager.removeAllCursors();
    CursorManager.setCursor(grabCursor,CursorManagerPriority.LOW,-7,-7);
    sectQuestionsDG.addEventListener(MouseEvent.ROLL_OVER,over);
    sectQuestionsDG.addEventListener(MouseEvent.ROLL_OUT,out);
}
public function out(evt:Event):void{
    CursorManager.removeAllCursors();
}
invertedSpear
This is my answer and solves the problem, but I still want to award the bounty to someone, see the very top of the question for the terms of the bounty
invertedSpear
+1  A: 

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);"/>
Patrick
This is a good solution, cleaner in concept than mine is. Still doesn't prevent the rollover/out being fired for each item, just handles it better when it does. I definitely like your idea the best so far, if no one can tell me how to prevent the events firing in the first place you will be the winner. Thanks! Will be trying this out later.
invertedSpear
finally got a chance to implement your idea and it is working great. +1 for giving me such a complete answer (your code examples are almost copy/paste-able into my app) which helps me actually understand your intended implementation. I especially like the dragExit causing a deny cursor. Thanks again, the dev community needs more people like you.
invertedSpear
Happy that it helps :) You re welcome.
Patrick