Flex/AS3 拖放 - 自定义拖放反馈

Question

我正在使用HorizontalList 组件显示图像列表，您可以从另一个组件中拖动图像加入列表，这一切正常。

如果我这样做list.showDropFeedback(event)，我会在HorizontalList 中的图像顶部看到一个难看的黑条 - 我真正想要的是图像左/右的一条线，新的实际上将坐在那里。

我想我需要定义一个自定义 DropFeedback 来覆盖默认值。有谁知道有没有办法做到这一点？

谢谢！

Answer 1

Yo 可以通过重写 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（第 95-105 行）

public function HorizontalList()
{
    super();

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

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

请注意，Horizo​​ntalList 的构造函数正在将方向值初始化为 Vertical。

一种快速简便的解决方法是在您的 MXML 中简单地指定 direction="horizontal"：

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

如果此错误尚未修复（并等待下一个版本），我会感到惊讶，但我会检查 Flex SDK bug database 并在没有记录的情况下提交报告。

Answer 4

有一个名为 dropIndicatorSkin 的样式属性，它控制当您在基于列表的组件上拖动时显示的线条的外观。 来自 adobe 文档：

dropIndicatorSkin

用于指示拖放项目的位置的皮肤。当 ListBase 派生组件是拖放操作中的潜在放置目标时，对 showDropFeedback() 方法的调用会生成此类的一个实例，并将其放置在项目的 itemRenderer 上方一个像素处，如果drop发生，是drop后的item。默认值为mx.controls.listClasses.ListDropIndicator。

所有功能都内置在 Horizo​​ntalList 中以执行您的要求，但 Horizo​​ntalList 中似乎存在一个错误，它没有将其方向属性设置为水平。

您需要做的就是在 mxml 声明中添加 direction="horizo​​ntal" ，它会将 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);
    //....
}