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

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

所以，我按照建議的技術，它只適用於如果我明確地設置代理圖像的寬度/高度。爲什麼？

來源

2008-09-16 MidnightGun

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

名單：

<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; 
}

只是爲了短路：

它可以把它添加到事件處理程序的開始有用。這不是非常優雅，但它的工作。

來源

2008-09-16 18:37:13 Theo

dragView應該設置寬度和高度:) – jason 2013-03-25 08:36:50

我發現了一個更簡單的答案here。該示例擴展了DataGrid控件，但您可以使用List控件執行相同的操作。就我而言，我使用的圖像源代碼而不是類：

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」可以是任何你通常使用的圖像源（嵌入，鏈接等）

來源

2010-02-02 15:20:41 Ola

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

回答

相關問題