Flex/AS3 Drag Drop - Custom Drop Feedback

Question

Я использую компонент HorizontalList, чтобы отобразить список изображений, вы можете перетаскивать изображения из другого компонента, чтобы присоединиться к списку, все это работает отлично.

Если у меня list.showDropFeedback(event), я получаю неприглядную черную полосу в верхней части изображений в HorizontalList - то, что я действительно хочу, это строка слева/справа от изображения, где будет сидеть новый.

Я думаю, мне нужно определить пользовательскую DropFeedback, чтобы переопределить значение по умолчанию. Кто-нибудь знает, есть ли способ достичь этого?

Спасибо!

Answer 1

Yuo может сделать это путем переопределения метода showDropFeedback().Мой код ниже:

import mx.controls.HorizontalList; 
import mx.controls.listClasses.IListItemRenderer; 
import mx.core.mx_internal; 
import mx.events.DragEvent; 

use namespace mx_internal; 

public class HList extends HorizontalList 
{ 
    public function HList() 
    { 
     super();       
    } 


     override public function showDropFeedback(event:DragEvent):void 
     { 

      super.showDropFeedback(event); 

      dropIndicator.setActualSize(rowHeight - 4, 4); 
      DisplayObject(dropIndicator).rotation = 90; 

     } 



} 

Answer 2

Существует свойство стиля, называемое dropIndicatorSkin, которое контролирует внешний вид строки, отображаемой при перетаскивании компонента, основанного на списке. Из документов глинобитных:

dropIndicatorSkin

кожа использовать, чтобы указать, где тащили пункт можно опустить. Когда компонент, основанный на элементе ListBase, является потенциальной целью перетаскивания в операции перетаскивания, вызов метода showDropFeedback() делает экземпляр этого класса и позиционирует его на один пиксель выше itemRenderer для элемента, где, если происходит падение, это элемент после выпавшего предмета. Значение по умолчанию: mx.controls.listClasses.ListDropIndicator.

Все функциональные возможности встроены в HorizontalList, чтобы делать то, что вы просите, но, похоже, в HorizontalList появляется ошибка, в которой он не задает свой свойство направления горизонтали.

Все, что вам нужно сделать, это положить направление = «горизонтальный» в объявлении MXML и он будет вращать dropIndicatorSkin 90 градусов и poistion его между деталями вместо над ними:

<mx:HorizontalList ... direction="horizontal" ... /> 

Answer 3

Спасибо, это похоже, вращает dropIndicator, как ожидалось, но производит другое очень неожиданное поведение. Горизонтальная полоса прокрутки в списке внезапно исчезает, а перетаскивание элемента в список заставляет его пропустить прямо до конца ... Похоже, я почти там, но не совсем!

Мой AS3 код ....

// in constructor... (extends HorizontalList) 
this.direction = "horizontal"; 

this.addEventListener(DragEvent.DRAG_ENTER, onDragEnter); 
this.addEventListener(DragEvent.DRAG_OVER, onDragOver); 
this.addEventListener(DragEvent.DRAG_EXIT, onDragExit); 
this.addEventListener(DragEvent.DRAG_DROP, onDragDrop); 

private function onDragEnter(event:DragEvent):void { 
    event.preventDefault(); 
    if (event.dragSource.hasFormat("treeItems") || event.dragSource.hasFormat("items")) { 
     DragManager.acceptDragDrop(event.target as UIComponent); 
    } 
    this.showDropFeedback(event); 
} 

public function onDragOver(event:DragEvent):void { 
    event.preventDefault(); 
    this.showDropFeedback(event); 
} 

public function onDragExit(event:DragEvent):void { 
    event.preventDefault(); 
    this.showDropFeedback(event); 
} 

private function onDragDrop(event:DragEvent):void { 
    event.preventDefault(); 
    this.hideDropFeedback(event); 
    //.... 
} 

Answer 4

Я решил это в конечном счете, добавив следующее в моем стиле Application ..

HorizontalList { 
dropIndicatorSkin: ClassReference("com.package.HorizontalListDropIndicator"); 
} 

И создать свой скин ..

package com.package { 

import flash.display.Graphics; 
import mx.skins.ProgrammaticSkin; 

public class HorizontalListDropIndicator extends ProgrammaticSkin { 

    public function HorizontalListDropIndicator() { 
    super(); 
    } 

    override protected function updateDisplayList(w:Number, h:Number):void { 
    super.updateDisplayList(w, h); 

    var g:Graphics = graphics; 

    g.clear(); 
    g.lineStyle(2, 0xFF0000); 

    g.moveTo(0, 0); 
    g.lineTo(0, 250); 

    } 
} 
} 

Answer 5

Похоже, это ошибка в Flex Framework:

Flex Builder 3/sdks/3.3.0/frameworks/projects/framework/src/mx/controls/HorizontalList.as (строки 95-105)

public function HorizontalList() 
{ 
    super(); 

    _horizontalScrollPolicy = ScrollPolicy.AUTO; 
    _verticalScrollPolicy = ScrollPolicy.OFF; 

    direction = TileBaseDirection.VERTICAL; 
    maxRows = 1; 
    defaultRowCount = 1; 
} 

Обратите внимание, что конструктор HorizontalList является инициализируя значение направления до Вертикальное.

Быстро и легко Обходной просто указать direction="horizontal" в вашем MXML:

<mx:HorizontalList id="fooLst" direction="horizontal" dataProvider="{foo}" /> 

Я был бы удивлен, если эта ошибка уже не исправлена ​​(и в ожидании следующего выпуска), но Я проверю Flex SDK bug database и отправлю отчет, если он не задокументирован.