如何在Flex列表控件中實現自定義拖動功能？

Question

Flex內置了用於列表控件的拖放操作，並允許您覆蓋它。 但他們並沒有在例子中說明這一點。 內置功能會自動拖動列表項，如果要覆蓋它，則會發現列表本身正在設置處理程序。 我特別想做的是，我的TileList顯示了我可以拖到大畫布上的項目的小縮略圖。 當我從列表中拖動項目時，拖動代理應該是不同的圖像。

所以，我遵循建議的技術，只有在代理圖像上明確設置寬度/高度時它才有效。 為什么？

Answer 1

這是不明顯的，直到你嘗試了它=）幾周前我在同樣的事情上掙扎。 這是我的解決方案：

名單：

<List>
  <mouseDown>onListMouseDown(event)</mouseDown>
</Tree>

鼠標按下處理程序：

private function onMouseDown( event : MouseEvent ) : void {
  var list : List = List(event.currentTarget);

  // the data of the clicked row, change the name of the class to your own
  var item : MyDataType = MyDataType(list.selectedItem);

  var source : DragSource = new DragSource();

  // MyAwsomeDragFormat is the key that you will retrieve the data by in the
  // component that handles the drop
  source.addData(item, "MyAwsomeDragFormat");

  // this is the component that will be shown as the drag proxy image
  var dragView : UIComponent = new Image();

  // set the source of the image to a bigger version here
  dragView.source = getABiggerImage(item);

  // get hold of the renderer of the clicked row, to use as the drag initiator
  var rowRenderer : UIComponent = UIComponent(list.indexToItemRenderer(list.selectedIndex));

  DragManager.doDrag(
    rowRenderer,
    source,
    event,
    dragView
  );
}

當用戶單擊列表中的項目時，這將開始拖動。 請注意，我沒有在列表中設置dragEnabled和其他與拖動相關的屬性，因為我自己處理了所有這些。

將它添加到事件處理程序的開頭可能很有用：

if ( event.target is ScrollThumb || event.target is Button ) {
  return;
}

如果用戶點擊滾動條中的某個位置，則只是短路。 它不是很優雅，但它可以完成這項工作。

Answer 2

我在這里找到了一個更簡單的答案。 該示例擴展了DataGrid控件，但您可以對List控件執行相同操作。 就我而言，我使用的是圖像源而不是Class：

public class CustomDragList extends List {

    [Bindable]
    public var dragProxyImageSource:Object;

    override protected function get dragImage():IUIComponent {
        var image:Image = new Image();
        image.width = 50;
        image.height = 50;
        image.source = dragProxyImageSource;
        image.owner = this;
        return image;
    }
}

然后使用這樣的自定義列表：

<control:CustomDragList
    allowMultipleSelection="true"
    dragEnabled="true" 
    dragProxyImageSource="{someImageSource}"
    dragStart="onDragStart(event)"/>

其中'someImageSource'可以是您通常用於圖像源的任何內容（嵌入，鏈接等）