Posts tagged flex

While doing a drag-drop on a list based component(e.g. listbox,grid) we were having an issue where it used to autoscroll with mouse movement even though pointer is no where near it.

It was happening due to the event.preventDefault() called in the ondragDrop function. The dragHandler functions in the listbase class. We fixed it with a minor hack overriding the related dragdrop event handler methods.  Here’s the code -

package
{
 import mx.collections.CursorBookmark;
 import mx.controls.List;
 import mx.core.mx_internal;
 import mx.events.DragEvent;
 import mx.managers.DragManager;

 use namespace mx_internal;

 public class DroppableListItemList extends List
 {
 public function DroppableListItemList()
 {
 super();
 }

 /**
 *  Handles <code>DragEvent.DRAG_COMPLETE</code> events.  This method
 *  removes the item from the data provider.
 *
 *  @param event The DragEvent object.
 */
 override protected function dragCompleteHandler(event:DragEvent):void
 {
 isPressed = false;

 resetDragScrolling();
 if (event.isDefaultPrevented())
 return;

 if (event.action == DragManager.MOVE && dragMoveEnabled)
 {
 if (event.relatedObject != this)
 {
 var indices:Array = selectedIndices;
 indices.sort(Array.NUMERIC);
 var n:int = indices.length;
 for (var i:int = n - 1; i >= 0; i--)
 {
 collectionIterator.seek(CursorBookmark.FIRST, indices[i]);
 collectionIterator.remove();
 }
 clearSelected(false);
 }
 }

 // this can probably be removed b/c it's in dragExit and dragDrop, but leaving these two
 // lines for now
 lastDragEvent = null;
 }

 /**
 *  Handles <code>DragEvent.DRAG_DROP events</code>.  This method  hides
 *  the drop feedback by calling the <code>hideDropFeedback()</code> method.
 *
 *  <p>If the action is a <code>COPY</code>,
 *  then this method makes a deep copy of the object
 *  by calling the <code>ObjectUtil.copy()</code> method,
 *  and replaces the copy's <code>uid</code> property (if present)
 *  with a new value by calling the <code>UIDUtil.createUID()</code> method.</p>
 *
 *  @param event The DragEvent object.
 *
 *  @see mx.utils.ObjectUtil
 *  @see mx.utils.UIDUtil
 */
 override protected function dragDropHandler(event:DragEvent):void
 {
 resetDragScrolling();
 if (event.isDefaultPrevented())
 return;

 hideDropFeedback(event);
 lastDragEvent = null;

 if (enabled && event.dragSource.hasFormat("items"))
 {
 if (!dataProvider)
 // Create an empty collection to drop items into.
 dataProvider = [];

 var items:Array = event.dragSource.dataForFormat("items") as Array;
 var dropIndex:int = calculateDropIndex(event);
 if (event.action == DragManager.MOVE && dragMoveEnabled)
 {
 if (event.dragInitiator == this)
 {
 var indices:Array = selectedIndices;
 indices.sort(Array.NUMERIC);

 for (var i:int = indices.length - 1; i >= 0; i--)
 {
 collectionIterator.seek(CursorBookmark.FIRST, indices[i]);
 if (indices[i] < dropIndex)
 dropIndex--;
 collectionIterator.remove();
 }
 clearSelected(false);
 }
 }
 collectionIterator.seek(CursorBookmark.FIRST, dropIndex);

 for (i = items.length - 1; i >= 0; i--)
 {
 if (event.action == DragManager.COPY)
 {
 collectionIterator.insert(copyItemWithUID(items[i]));
 }
 else if (event.action == DragManager.MOVE)
 {
 collectionIterator.insert(items[i]);
 }
 }
 }
 lastDragEvent = null;

 }

 /**
 *  Handles <code>DragEvent.DRAG_EXIT</code> events.  This method hides
 *  the UI feeback by calling the <code>hideDropFeedback()</code> method.
 *
 *  @param event The DragEvent object.
 */
 override protected function dragExitHandler(event:DragEvent):void
 {
 resetDragScrolling();

 if (event.isDefaultPrevented())
 return;

 lastDragEvent = null;

 hideDropFeedback(event);

 DragManager.showFeedback(DragManager.NONE);
 }
 }
}