如何在Flex列表控件中实现自定义拖动功能?
时间:2020-03-05 18:56:39 来源:igfitidea点击:
Flex内置了用于列表控件的拖放功能,我们可以覆盖它。但是他们没有在示例中涵盖这一点。内置功能会自动拖动列表项,如果要覆盖此列表项,则会发现正在列表本身上设置了处理程序。
我特别想做的是,我的TileList显示可以拖到大Canvas上的项目的小缩略图。当我从列表中拖动项目时,拖动代理应该是不同的图像。
因此,我遵循了建议的技术,并且仅当我在代理映像上显式设置宽度/高度时,该方法才有效。为什么?
解决方案
回答
除非我们尝试过,否则这是不明显的=)几周前,我还在为同一件事苦苦挣扎。这是我的解决方案:
列表:
<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; }
仅当用户单击滚动条中的某个位置时短路。它不是很优雅,但是可以完成工作。
回答
我在这里找到了一个简单的答案。该示例扩展了DataGrid控件,但是我们可以使用List控件进行相同的操作。就我而言,我使用图像源而不是Class:
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"可以是我们通常用于图像源的任何东西(嵌入式,链接等)