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

私はより簡単な答え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; 
    } 
} 

次に、このようにそのカスタムリストを使用：「someImageSourceは」普段イメージのために使用したい何もすることができます

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

ソース（埋め込み、リンクなど）