如何在Flex列表控件中实现自定义拖动功能？

Flex内置了列表控件的拖放功能，并允许您覆盖它。但是他们没有在例子中说明这一点。内置的功能自动拖拽列表项，如果你想覆盖它，你会发现处理程序正在被设置在列表本身。我特别想做的事情是，我的TileList显示我可以拖放到大画布上的项目的小缩略图。当我从列表中拖动一个项目时，拖动代理应该是一个不同的图像。如何在Flex列表控件中实现自定义拖动功能？

所以，我按照建议的技术，它只适用于如果我明确地设置代理图像的宽度/高度。为什么？

来源

2008-09-16 MidnightGun

这是不明显的，直到你已经尝试它=）我几周前同样的事情挣扎。这是我的解决方案：

名单：

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

只是为了短路：

它可以把它添加到事件处理程序的开始有用。这不是非常优雅，但它的工作。

来源

2008-09-16 18:37:13 Theo

dragView应该设置宽度和高度:) – jason 2013-03-25 08:36:50

我发现了一个更简单的答案here。该示例扩展了DataGrid控件，但您可以使用List控件执行相同的操作。就我而言，我使用的图像源代码而不是类：

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”可以是任何你通常使用的图像源（嵌入，链接等）

来源

2010-02-02 15:20:41 Ola

如何在Flex列表控件中实现自定义拖动功能？

回答

相关问题