Flex 拖拽功能实现的几个重要属性和事件

最新推荐文章于 2025-09-07 17:11:01 发布

原创最新推荐文章于 2025-09-07 17:11:01 发布 · 169 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flex #Adobe #XML

flex 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了一个使用Flex框架实现的拖放功能案例，展示了如何通过检查拖放数据来控制控件是否接受放置操作。代码示例中包括了属性设置、事件处理逻辑及数据绑定等关键部分。

属性：

dragEnabled : Boolean：一个标志，指示是否可以将项目拖出此控件并放到其它控件上。
dragMoveEnabled : Boolean：一个标志，指示在拖放操作过程中是否可以移动控件中的项目，而不只是从控件中复制这些项目。
dropEnabled : Boolean：一个标志，指示是否可以将所拖动的项目放到此控件上。

事件：

dragComplete：在拖动操作完成时（将拖动的数据放到放置目标时或在没有执行放置操作的情况下结束拖放操作时）由拖动启动器（作为要拖动的数据源的组件）调度。
dragDrop：用户在放置目标上释放鼠标时由放置目标调度。
dragEnter：当用户在拖动操作过程中将鼠标移动到某个组件所处的位置时，由该组件调度。
dragExit：用户在组件外拖动但没有将数据放置到目标时，由组件调度。
dragOver：在拖动操作期间，当用户在鼠标位于组件上方的情况下移动鼠标时，由组件调度。
dragStart：启动拖动操作时，由拖动启动器调度。

如果一个View中有两个不同的拖拽，并且不能相互影响

需要判断拖拽的对象是否是自己所需要的

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
	<mx:ArrayCollection id="employees1">
		<mx:Object name="Christina Coenraets" phone="555-219-2270" email="ccoenraets@fictitious.com" active="true" />
		<mx:Object name="Joanne Wall" phone="555-219-2012" email="jwall@fictitious.com" active="true" />
		<mx:Object name="Maurice Smith" phone="555-219-2012" email="maurice@fictitious.com" active="false" />
		<mx:Object name="Mary Jones" phone="555-219-2000" email="mjones@fictitious.com" active="true" />
	</mx:ArrayCollection>
	<mx:ArrayCollection id="employees2">
		<mx:Object name="Christina Coenraets" phone="555-219-2270" type="0" />
		<mx:Object name="Joanne Wall" phone="555-219-2012" type="0" />
		<mx:Object name="Maurice Smith" phone="555-219-2012" type="0" />
		<mx:Object name="Mary Jones" phone="555-219-2000" type="0" />
	</mx:ArrayCollection>
    
    <mx:Script>
    	<![CDATA[
    		import mx.events.DragEvent;
    		
    		private function dg1DragOver(e:DragEvent):void
    		{
    			var dgRow:Object = new Object();
    			dgRow = e.dragSource.dataForFormat("items");
    			trace(dgRow);
    			if (dgRow.hasOwnProperty("email"))
    			{
    				dg1.dropEnabled = true;
    			}
    			else dg1.dropEnabled = false;
    		}
    		
    	]]>
    </mx:Script>
    
    <mx:DataGrid id="dg1" color="0x323232" width="100%" dataProvider="{employees1}"
    	dragEnabled="true" dragMoveEnabled="true"
    	dragEnter="dg1DragOver(event)">
        <mx:columns>
            <mx:DataGridColumn dataField="name" headerText="Name"/>
            <mx:DataGridColumn dataField="phone" headerText="Phone"/>
            <mx:DataGridColumn dataField="email" headerText="Email"/>
        </mx:columns>
    </mx:DataGrid>
    
    <mx:DataGrid id="dg2" color="0x323232" width="100%" dataProvider="{employees2}"
    	dragEnabled="true" dragMoveEnabled="true">
        <mx:columns>
            <mx:DataGridColumn dataField="name" headerText="Name"/>
            <mx:DataGridColumn dataField="phone" headerText="Phone"/>
        </mx:columns>
    </mx:DataGrid>
    
</mx:Application>