Flex/AS3 拖放 - 自定義拖放反饋

Question

我正在使用HorizontalList組件來顯示圖像列表，您可以從另一個組件中拖動圖像加入列表，這一切都很好。

如果我這樣做list.showDropFeedback(event)我會在HorizontalList ntalList 的圖像頂部看到一個難看的黑條 - 我真正想要的是圖像左/右的一條線，新的將實際坐在那里。

我想我需要定義一個自定義 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

我最終通過在我的應用程序樣式中添加以下內容來解決這個問題..

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 3

看起來這是 Flex 框架中的一個錯誤：

Flex Builder 3/sdks/3.3.0/frameworks/projects/framework/src/mx/controls/HorizontalList.as HorizontalList.as（第 95-105 行）

public function HorizontalList()
{
    super();

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

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

請注意， HorizontalList的構造函數將方向值初始化為Vertical 。

一個快速簡單的解決方法是在 MXML 中簡單地指定direction="horizontal" ：

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

如果此錯誤尚未修復（並等待下一個版本），我會感到驚訝，但我會檢查Flex SDK 錯誤數據庫，如果沒有記錄，請提交報告。

Answer 4

有一個名為 dropIndicatorSkin 的樣式屬性，它控制當您在基於列表的組件上拖動時顯示的線條的外觀。 來自 adobe 文檔：

下降指示器皮膚

用於指示可以將拖動項目放置在何處的外觀。 當 ListBase 派生的組件是拖放操作中的潛在放置目標時，調用showDropFeedback()方法會生成此 class 的實例，並將其定位在itemRenderer上方一個像素的位置，如果放置發生，是被丟棄的物品之后的物品。 默認值為mx.controls.listClasses.ListDropIndicator 。

所有功能都內置在 HorizontalList 中以執行您的要求，但 HorizontalList 中似乎存在一個錯誤，它沒有將其方向屬性設置為水平。

您需要做的就是將 direction="horizontal" 放在 mxml 聲明中，它會將 dropIndicatorSkin 旋轉 90 度並將其放置在項目之間而不是它們之上：

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

Answer 5

謝謝，這似乎按預期旋轉了 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);
    //....
}