Wie kann ich die benutzerdefinierte Ziehfunktionalität in einem Flex-Listensteuerelement implementieren?

Question

Flex hat Drag-n-Drop für Listensteuerelemente eingebaut und ermöglicht es Ihnen, dies zu überschreiben. Aber sie decken das nicht in Beispielen ab. Die integrierte Funktionalität zieht das Listenelement automatisch nach unten. Wenn Sie dies überschreiben möchten, werden die Handler in der Liste selbst eingerichtet. Was ich speziell machen möchte, ist meine TileList zeigt kleine Thumbnails von Elementen, die ich auf einen großen Canvas ziehen kann. Wenn ich ein Objekt aus der Liste ziehe, sollte der Drag-Proxy ein anderes Bild sein.

Also, ich folgte der Technik vorgeschlagen und es funktioniert nur, wenn ich explizit die Breite/Höhe auf dem Proxy-Bild festlegen. Warum?

Answer 1

Es ist nicht offensichtlich, bis Sie es versucht haben =) Ich hatte vor ein paar Wochen mit dem gleichen Problem. Dies war meine Lösung:

Die Liste:

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

Die Maus nach unten Handler:

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

, dass der Drag wird gestartet, wenn der Benutzer ein Element in der Liste klickt. Beachten Sie, dass ich dragEnabled und die anderen Drag-related Eigenschaften nicht auf der Liste festlegen, da ich all das selbst handle.

Es kann sinnvoll sein, diese von den Event-Handler an den Anfang hinzu:

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

Nur zu, wenn der Benutzer irgendwo in der Scrollbar klickt. Es ist nicht sehr elegant, aber es macht den Job.

Answer 2

Ich fand eine einfachere Antwort here. In diesem Beispiel wird ein DataGrid-Steuerelement erweitert, Sie können jedoch dasselbe mit einem List-Steuerelement durchführen. In meinem Fall verwende ich eine Bildquelle statt Klasse:

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

dann, dass benutzerdefinierte Liste wie folgt verwenden:

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

Wo someImageSource 'alles sein können Sie in der Regel für ein Bild verwenden würden, Quelle (eingebettet, verlinkt, etc.)