Как реализовать пользовательские функции перетаскивания в элементе управления списком Flex?

Question

Flex имеет встроенный drag-n-drop для элементов управления списком и позволяет вам переопределить это. Но они не охватывают это в примерах. Встроенная функциональность автоматически перетаскивает элемент списка, если вы хотите переопределить это, вы обнаружите, что обработчики настроены в самом списке. Что я конкретно хочу сделать, это мой 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; 
    } 
} 

Затем использовать этот пользовательский список, как это:

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

Где someImageSource 'может быть что угодно, вы обычно используете для изображения источник (встроенный, связанный и т. д.)