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

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

1 голос
/ 16 сентября 2008

Flex имеет встроенное перетаскивание для элементов управления списком и позволяет вам переопределить это. Но они не охватывают это в примерах. Встроенная функциональность автоматически перетаскивает элемент списка, если вы хотите переопределить это, вы обнаружите, что обработчики настраиваются в самом списке. Что я конкретно хочу сделать, так это то, что мой TileList показывает маленькие эскизы элементов, которые я могу перетащить на большой холст. Когда я перетаскиваю элемент из списка, прокси для перетаскивания должно быть другим изображением.

Итак, я следовал предложенной методике, и она работает, только если я явно установил ширину / высоту на прокси-изображении. Почему?

Ответы [ 2 ]

3 голосов
/ 16 сентября 2008

Это не очевидно, пока вы не попробовали это =) Я боролся с тем же самым всего несколько недель назад. Это было мое решение:

Список: 

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

Просто для короткого замыкания, если пользователь нажимает где-то на полосе прокрутки. Это не очень элегантно, но делает работу.

1 голос
/ 02 февраля 2010

Я нашел более простой ответ здесь . Этот пример расширяет элемент управления 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' может быть любым, что вы обычно используете для источника изображения (встроенный, связанный и т. Д.)

...