Flex:: How do I prevent in drag and drop, dragging onto self

Question

I have a Flex question. I was wondering, if I have two list boxes, and I want to drag and drop between both of them, how do I prevent the user from dragging onto the same list (thus duplicating the item? I cannot have a situation where that is the case. Thanks guys

Answer 1

Haven't tested it but I guess something like this should work:

Listen to dragStart event on both lists and set a source variable depending on event.target. Now listen to the dragDrop event on both lists and call event.preventDefault() if the source is same as the target.

Answer 2

I found the solution, which im not sure would work for anyone else. I basically had in my two lists: `

 <mx:List id="srcList" dataProvider="{_source}"
 allowMultipleSelection="true"
 enabled="{enabled}"
 labelField="{labelField}"
 iconFunction="iconFunction"
 dragEnabled="true" 
 dropEnabled="true" 
 dragDrop="doDragDrop(event);"
 width="100%"
 height="100%"  
 />
</mx:VBox>
<mx:VBox paddingTop="50">
 <mx:Button label="-&gt;" enabled="{enabled}" click="add()"/>
 <mx:Button label="&lt;-" enabled="{enabled}" click="rem()"/>
</mx:VBox>
<mx:VBox width="100%" height="100%">
 <mx:Label text="{right_col_heading}" />
 <mx:List id="dstList" dataProvider="{_destination}"
  allowMultipleSelection="true"
  enabled="{enabled}"
  dragEnabled="true" 
  dropEnabled="true" 
  dragDrop="doDragDrop(event);"
  width="100%"
  height="100%"
  labelField="{labelField}"
  iconFunction="iconFunction"
  verticalAlign="center"
 />`

I basically added a dragMoveEnabled = "true" to both lists and now basically not re-add to the same list an item of itself, but just move the order (which doesnt matter to me as its a soap send and the back-logic would put it in the correct order anyway).

Answer 3

Here are some simple functions I made while building a working application I used to wrap my head around flex drag and drop. I was looking for a way to have multiple lists with drag and drop functionality that would not interfere with each other. Also, I didn't want to deal with copying list data around.

private function onlyAllowMoveDragOverHandler(event:DragEvent):void {
  event.preventDefault();
  event.currentTarget.showDropFeedback(event);
  DragManager.showFeedback(DragManager.MOVE);
}

private function allowDropOnlyIfInitiatorEqualsComponent(event:DragEvent, component:IUIComponent):void {
  event.preventDefault();
  if (event.dragInitiator == component) {
    DragManager.acceptDragDrop(event.target as IUIComponent);
  }
  else {
    DragManager.showFeedback(DragManager.NONE);
  }
}

And I in use in my mxml:

<mx:List 
    x="10" 
    y="170" 
    id="availableLangsList" 
    dataProvider="{availableLangs}" 
    width="100" 
    height="200"
    dragEnabled="true"
    dragMoveEnabled="true"
    dropEnabled="true"
    dragOver="onlyAllowMoveDragOverHandler(event);"
    dragEnter="allowDropOnlyIfInitiatorEqualsComponent(event, selectedLangsList);"
    dragComplete="selectedLangs.refresh();"
    />

  <mx:Label x="129" y="153" text="list 4"/>
  <mx:List 
    x="129" 
    y="170" 
    id="selectedLangsList" 
    dataProvider="{selectedLangs}" 
    width="100" 
    height="200"
    dragEnabled="true"
    dragMoveEnabled="true"
    dropEnabled="true"
    dragOver="onlyAllowMoveDragOverHandler(event);"
    dragEnter="allowDropOnlyIfInitiatorEqualsComponent(event, availableLangsList);"
    dragComplete="availableLangs.refresh();"
    />