Question

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

如果我list.showDropFeedback(event)我在HorizontalList的图像顶部出现了一个难看的黑条 - 我真正想要的是图像左/右边的一条线，其中新的一条实际上会坐下来。

我想我需要定义一个自定义DropFeedback来覆盖默认值。有谁知道有没有办法实现这个目标？

谢谢！

Answer 1

您可以通过重写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 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 的构造函数正在将方向值初始化为垂直。

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

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

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

Answer 4

有一个名为dropIndicatorSkin的样式属性，用于控制在基于列表的组件上拖动时显示的行的外观。来自adobe docs：

<强> dropIndicatorSkin

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

所有功能都内置在HorizontalList中以执行您所要求的功能，但在HorizontalList中似乎存在一个错误，它不会将其direction属性设置为水平。

您需要做的就是在mxml声明中放置direction =“horizontal”，它会将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);
    //....
}

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

5 个答案: