Flex之拖放

最新推荐文章于 2015-11-02 11:27:16 发布

iteye_5904

最新推荐文章于 2015-11-02 11:27:16 发布

阅读量109

点赞数

本文链接：https://blog.csdn.net/iteye_5904/article/details/81819002

版权

AS3.0/2.0 / Flex / Flash 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

1.一个方向的拖放：

<?xml version="1.0" encoding="utf-8"?>
<!-- dragdrop\SimpleListToListMove.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
				creationComplete="initApp();">
	
	<mx:Script>
		<![CDATA[
		import mx.collections.ArrayCollection;
		
		private function initApp():void {
		srclist.dataProvider = 
		new ArrayCollection(['读书', '看电视', '做运动', '逛街', '种菜']);
		destlist.dataProvider = new ArrayCollection([]);
		}
		]]>
	</mx:Script>
	<mx:Panel 
		title="拖动选项示例" width="90%" height="90%"
		horizontalAlign="center"
		verticalAlign="middle">
		<mx:HBox>
			<mx:VBox>
				<mx:Label text="可供选择的行为"/>
				<mx:List id="srclist" 
						 allowMultipleSelection="true"
						 dragEnabled="true"
						 dragMoveEnabled="true"/>
			</mx:VBox>
			
			<mx:VBox>
				<mx:Label text="所选择的行为"/>
				<mx:List id="destlist" 
						 dropEnabled="true"/>
			</mx:VBox>
		</mx:HBox>
	</mx:Panel>
	
</mx:Application>

2.两个方向的拖放：

<?xml version="1.0" encoding="utf-8"?>
<!-- dragdrop\SimpleDGToDG.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
				creationComplete="initApp();">
	
	<mx:Script>
		<![CDATA[
		import mx.collections.ArrayCollection;
		
		private function initApp():void {
		srcgrid.dataProvider = new ArrayCollection([
		{摄影师:'Carole King', 照片:'Tapestry', 价格:11.99},
		{摄影师:'Paul Simon', 照片:'Graceland', 价格:10.99},
		{摄影师:'Original Cast', 照片:'Camelot', 价格:12.99},
		{摄影师:'The Beatles', 照片:'The White', 价格:11.99}
		]);
		
		destgrid.dataProvider = new ArrayCollection([]);    
		}
		]]>
	</mx:Script>
	<mx:Panel 
		title="数据列表拖放示例" width="90%" height="90%"
		horizontalAlign="center"
		verticalAlign="middle">
		<mx:HBox>
			<mx:VBox>
				<mx:Label text="列表1"/>
				<mx:DataGrid id="srcgrid" 
							 allowMultipleSelection="true" 
							 dragEnabled="true" 
							 dropEnabled="true" 
							 dragMoveEnabled="true">
					<mx:columns>
						<mx:DataGridColumn dataField="摄影师"/>
						<mx:DataGridColumn dataField="照片"/>
						<mx:DataGridColumn dataField="价格"/>
					</mx:columns>    
				</mx:DataGrid>
			</mx:VBox>
			
			<mx:VBox>
				<mx:Label text="列表2"/>
				<mx:DataGrid id="destgrid" 
							 allowMultipleSelection="true" 
							 dragEnabled="true" 
							 dropEnabled="true" 
							 dragMoveEnabled="true">
					<mx:columns>
						<mx:DataGridColumn dataField="摄影师"/>
						<mx:DataGridColumn dataField="照片"/>
						<mx:DataGridColumn dataField="价格"/>
					</mx:columns>    
				</mx:DataGrid>
			</mx:VBox>
		</mx:HBox>
	</mx:Panel>
</mx:Application>

3.同一个控件上的拖放：

<?xml version="1.0" encoding="utf-8"?>
<!-- dragdrop\SimpleTreeSelf.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            // 初始化树结构数据源。
            private function initApp():void {
                firstList.dataProvider = treeDP;
            }
        ]]>
    </mx:Script>
    
    <mx:XML id="treeDP">
        <node label="邮件">
            <node label="收件箱"/>
            <node label="个人信箱">
                <node label="示例"/>
                <node label="隐私"/>
                <node label="保存"/>
                <node label="信息"/>
            </node>
            <node label="日历"/>
            <node label="发出"/>
            <node label="垃圾箱"/>
        </node>
    </mx:XML>
   	<mx:Panel 
        title="树结构拖动示例" width="90%" height="90%"
		horizontalAlign="center"
		verticalAlign="middle">
	    <mx:Tree id="firstList" 
	    	width="90%"
	    	height="80%"
	        showRoot="false"
	        labelField="@label"
	        dragEnabled="true" 
	        dropEnabled="true" 
	        allowMultipleSelection="true"
	        creationComplete="initApp();"/>
	</mx:Panel>
	
</mx:Application>

4. 手工拖放

<?xml version="1.0" encoding="utf-8"?>
<!-- dragdrop\DandDCanvas.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundColor="white">

    <mx:Script>
        <![CDATA[

        import mx.core.DragSource;
        import mx.managers.DragManager;
        import mx.events.*;
        import mx.containers.Canvas;

        // 初始化拖动放置操作
        private function mouseMoveHandler(event:MouseEvent):void {
            // 在事件对象中得到拖动初始者组件。
            var dragInitiator:Canvas=Canvas(event.currentTarget);
            // 得到拖动初始者组件的颜色。
            var dragColor:int = dragInitiator.getStyle('backgroundColor');
            // 建立一个DragSource对象。
            var ds:DragSource = new DragSource();
            // 将事件加入的对象中。
            ds.addData(dragColor, 'color');
            // 调用DragManager的doDrag()方法来起始拖动。
            DragManager.doDrag(dragInitiator, ds, event);
        }

        // 当用户移动拖动代理到放置目标上。
        private function dragEnterHandler(event:DragEvent):void {
            // 如果格式为'color'则接受对象。
            if (event.dragSource.hasFormat('color')) {
                // 从事件对象中得到放置对象组件。
                var dropTarget:Canvas=Canvas(event.currentTarget);
                // 接受放置。
                DragManager.acceptDragDrop(dropTarget);
            }
        }
                
        //当目标接受拖动对象，并且用户在画布容器上释放鼠标键。
        private function dragDropHandler(event:DragEvent):void {
            // 从拖动初始者得到数据
            var data:Object = event.dragSource.dataForFormat('color');
            // 设置画布颜色。
            myCanvas.setStyle("backgroundColor", data);
        }    
        ]]>
    </mx:Script>

    <!-- A horizontal box with red and green canvases the user can drag -->
    <mx:Panel 
        title="自定义拖放行为示例" width="90%" height="90%"
		horizontalAlign="center"
		verticalAlign="middle">

	    <mx:HBox>
	        <mx:Canvas 
	            width="30" height="30" 
	            backgroundColor="red" 
	            borderStyle="solid" 
	            mouseMove="mouseMoveHandler(event);"/>
	        <mx:Canvas 
	            width="30" height="30" 
	            backgroundColor="green" 
	            borderStyle="solid" 
	            mouseMove="mouseMoveHandler(event);"/>
	    </mx:HBox>
	
	    <mx:Label text="拖动颜色到画布中"/>
	
	    <!-- dragEnter和dragDrop事件运行放置 -->
	    <mx:Canvas id="myCanvas" 
	        width="100" height="100" 
	        backgroundColor="#FFFFFF" 
	        borderStyle="solid" 
	        dragEnter="dragEnterHandler(event);" 
	        dragDrop="dragDropHandler(event);"/>
	</mx:Panel>
</mx:Application>

4. 容器为放置目标示例：

<?xml version="1.0" encoding="utf-8"?>
<!-- dragdrop\DragProxyExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            import mx.managers.DragManager;
            import mx.core.DragSource;
            import mx.events.DragEvent;
            import flash.events.MouseEvent;

            [Embed(source='./assets/eek.gif')]
            public var globeImage:Class;

           // mouseMove事件管理器用来初始化图像看见的拖动放置操作。
            private function mouseOverHandler(event:MouseEvent):void 
            {                
                var dragInitiator:Image=Image(event.currentTarget);
                var ds:DragSource = new DragSource();
                ds.addData(dragInitiator, "img");               

                // 拖动管理器，使用图像控件为拖动代理，以显示图片在画布中被拖动。
                var imageProxy:Image = new Image();
                imageProxy.source = globeImage;
                imageProxy.height=15;
                imageProxy.width=15;                
                DragManager.doDrag(dragInitiator, ds, event, 
                    imageProxy, -15, -15, 1.00);
            }
            
            // dragEnter事件管理器用来使画布容器可以被放入数据。
            private function dragEnterHandler(event:DragEvent):void {
                if (event.dragSource.hasFormat("img"))
                {
                    DragManager.acceptDragDrop(Canvas(event.currentTarget));
                }
            }

           // dragDrop事件管理器用来在画布容器中，通过dropping来设定图片控件的位置。
            private function dragDropHandler(event:DragEvent):void {
                Image(event.dragInitiator).x = 
                    Canvas(event.currentTarget).mouseX;
                Image(event.dragInitiator).y = 
                    Canvas(event.currentTarget).mouseY;
            }
        ]]>
    </mx:Script>
  <mx:Panel 
        title="容器为放置目标示例" width="90%" height="90%"
		horizontalAlign="center"
		verticalAlign="middle">    
	    <!-- 画布为放置目标容器 --> 
	    <mx:Canvas id="v1" 
	        width="100%" height="100%"  
	        borderStyle="solid" 
	        backgroundColor="#FBF4D9"
	        dragEnter="dragEnterHandler(event);" 
	        dragDrop="dragDropHandler(event);">
        
	        <!-- 图片为拖动初始者 -->
	        <mx:Image id="myimg" 
	            source="@Embed(source='./assets/eek.gif')" 
            	mouseMove="mouseOverHandler(event);"/> 
    	</mx:Canvas>
   </mx:Panel> 
</mx:Application>

5. 设定拖放代理示例:

<?xml version="1.0" encoding="utf-8"?>
<!-- dragdrop\DragProxyExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            import mx.managers.DragManager;
            import mx.core.DragSource;
            import mx.events.DragEvent;
            import flash.events.MouseEvent;

            [Embed(source='./assets/eek.gif')]
            public var globeImage:Class;

           // mouseMove事件管理器用来初始化图像看见的拖动放置操作。
            private function mouseOverHandler(event:MouseEvent):void 
            {                
                var dragInitiator:Image=Image(event.currentTarget);
                var ds:DragSource = new DragSource();
                ds.addData(dragInitiator, "img");               

                // 拖动管理器，使用图像控件为拖动代理，以显示图片在画布中被拖动。
                var imageProxy:Image = new Image();
                imageProxy.source = globeImage;
                imageProxy.height=15;
                imageProxy.width=15;                
                DragManager.doDrag(dragInitiator, ds, event, 
                    imageProxy, -15, -15, 1.00);
            }
            
            // dragEnter事件管理器用来使画布容器可以被放入数据。
            private function dragEnterHandler(event:DragEvent):void {
                if (event.dragSource.hasFormat("img"))
                {
                    DragManager.acceptDragDrop(Canvas(event.currentTarget));
                }
            }

           // dragDrop事件管理器用来在画布容器中，通过dropping来设定图片控件的位置。
            private function dragDropHandler(event:DragEvent):void {
                Image(event.dragInitiator).x = 
                    Canvas(event.currentTarget).mouseX;
                Image(event.dragInitiator).y = 
                    Canvas(event.currentTarget).mouseY;
            }
        ]]>
    </mx:Script>
  <mx:Panel 
        title="容器为放置目标示例" width="90%" height="90%"
		horizontalAlign="center"
		verticalAlign="middle">    
	    <!-- 画布为放置目标容器 --> 
	    <mx:Canvas id="v1" 
	        width="100%" height="100%"  
	        borderStyle="solid" 
	        backgroundColor="#FBF4D9"
	        dragEnter="dragEnterHandler(event);" 
	        dragDrop="dragDropHandler(event);">
        
	        <!-- 图片为拖动初始者 -->
	        <mx:Image id="myimg" 
	            source="@Embed(source='./assets/eek.gif')" 
            	mouseMove="mouseOverHandler(event);"/> 
    	</mx:Canvas>
   </mx:Panel> 
</mx:Application>

6. 拖放事件管理示例：

<?xml version="1.0" encoding="utf-8"?>
<!-- dragdrop\ListToListShowFeedback.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    creationComplete="initApp();">

    <mx:Script>
        <![CDATA[
            import mx.managers.DragManager;
            import mx.events.DragEvent;
            import mx.collections.ArrayCollection;
    
            private function initApp():void {
                firstList.dataProvider = new ArrayCollection([
                    {label:"第一列", data:"1"},
                    {label:"第二列", data:"2"},
                    {label:"第三列", data:"3"},
                    {label:"第四列", data:"4"}
                ]);
                secondList.dataProvider = new ArrayCollection([]);
            }

            private var tempBorderColor:uint;
            private var borderColorSet:Boolean = false;

            private function dragOverHandler(event:DragEvent):void {
                event.preventDefault();
                
                // 调用showDropFeedback(event)来显示放置标记。
                event.currentTarget.showDropFeedback(event);
            
                if (event.dragSource.hasFormat("items"))
                {
                     if (borderColorSet == false) {                 
                        tempBorderColor = 
                            event.currentTarget.getStyle('borderColor');
                        borderColorSet = true;
                    }
                
                    // 设定拖动回复的标记，并改变放置目标外框为红色。
                    event.currentTarget.setStyle('borderColor', 'red');
                    if (event.ctrlKey) {                    
                        DragManager.showFeedback(DragManager.COPY);
                        return;
                    }
                    else if (event.shiftKey) {
                        DragManager.showFeedback(DragManager.LINK);
                        return;
                    }
                    else {
                        DragManager.showFeedback(DragManager.MOVE);
                        return;
                    }
                }

                // 标记不能放置。
                DragManager.showFeedback(DragManager.NONE);                
            }
            
            private function dragDropHandler(event:DragEvent):void {
                dragExitHandler(event);
            }            

            // 恢复外框的颜色。
            private function dragExitHandler(event:DragEvent):void {
              event.currentTarget.setStyle('borderColor', tempBorderColor);
              borderColorSet = true;
            }
        ]]>
    </mx:Script>
  <mx:Panel 
        title="改变放置目标属性示例" width="90%" height="90%"
		horizontalAlign="center"
		verticalAlign="middle">   
	    <mx:HBox id="myHB">
	        <mx:List  id="firstList" 
	            dragEnabled="true"/>
	
	        <mx:List  id="secondList" 
	            borderThickness="2"
	            dropEnabled="true"
	            dragMoveEnabled="true"
	            dragOver="dragOverHandler(event);"
	            dragDrop="dragExitHandler(event);"
	            dragExit="dragExitHandler(event);"/>
	    </mx:HBox>
  </mx:Panel>
</mx:Application>

7.在不同列表类控件之间移动和复制数据示例：

<?xml version="1.0" encoding="utf-8"?>
<!-- dragdrop\DandDListToDG.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    creationComplete="initApp();">

    <mx:Script>
        <![CDATA[
            import mx.events.DragEvent;
            import mx.managers.DragManager;
            import mx.core.DragSource;
            import mx.collections.IList;
            import mx.collections.ArrayCollection;
    
            private function initApp():void {
                srcList.dataProvider = new ArrayCollection([
                    {label:"第一列", data:"1"},
                    {label:"第二列", data:"2"},
                    {label:"第三列", data:"3"},
                    {label:"第四列", data:"4"},
                ]);
                
                destDG.dataProvider = new ArrayCollection([]);
            }

            private function dragDropHandler(event:DragEvent):void {
              if (event.dragSource.hasFormat("items"))
              {
                // 定义自处理dragDrop事件。
                event.preventDefault();

                event.currentTarget.hideDropFeedback(event);

                // 得到放置目标。
                var dropTarget:DataGrid = 
                  DataGrid(event.currentTarget);

                var itemsArray:Array = 
                    event.dragSource.dataForFormat('items') as Array;
                var tempItem:Object = 
                    { label: itemsArray[0].label, 
                      data: itemsArray[0].data, 
                      date: new Date()
                    };
    
                // 得到在放置目标上的放置位置。
                var dropLoc:int = dropTarget.calculateDropIndex(event);
       
                IList(dropTarget.dataProvider).addItemAt(tempItem, dropLoc);
                
                
              }
            }
        ]]>
    </mx:Script>
    
  	<mx:Panel 
        title="不同类型控件中复制移动数据示例" width="90%" height="90%"
		horizontalAlign="center"
		verticalAlign="middle">  
	    <mx:HBox>
	        <mx:List  id="srcList" 
	            dragEnabled="true"
	            dragMoveEnabled="true"/>
	
	        <mx:DataGrid  id="destDG" 
	            dropEnabled="true"
	            dragDrop="dragDropHandler(event);">
	            <mx:columns>
	                <mx:DataGridColumn headerText="名称" dataField="label"/>
	                <mx:DataGridColumn headerText="数据" dataField="data"/>            
	                <mx:DataGridColumn headerText="日期" dataField="date"/>            
	            </mx:columns>                
	        </mx:DataGrid>            
	    </mx:HBox>
	</mx:Panel>
	
</mx:Application>

8. 不同类型的非列表类控件之间移动或复制数据示例：

<?xml version="1.0" encoding="utf-8"?>
<!-- dragdrop\DandDImageCopyMove.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="horizontal">

    <mx:Script>
        <![CDATA[
            import mx.managers.DragManager;
            import mx.core.DragSource;
            import mx.events.DragEvent;
            import flash.events.MouseEvent;

            [Embed(source='./assets/eek.gif')]
            public var globeImage:Class;

            // mouseMove数据管理用来定义图片控件的功能。
            private function mouseOverHandler(event:MouseEvent):void 
            {                
                var dragInitiator:Image=Image(event.currentTarget);
                var ds:DragSource = new DragSource();
                ds.addData(dragInitiator, "img");               

                // 拖动管理器所以图片作为拖动代理。
                var imageProxy:Image = new Image();
                imageProxy.source = globeImage;
                imageProxy.height=10;
                imageProxy.width=10;                
                DragManager.doDrag(dragInitiator, ds, event, 
                    imageProxy, -15, -15, 1.00);
            }
            
            // dragEnter事件管理器用来定义放置目标。
            private function dragEnterHandler(event:DragEvent):void {
              if (event.dragSource.hasFormat("img"))
                DragManager.acceptDragDrop(Canvas(event.currentTarget));
            }
            
            // dragOver事件管理器设定拖放操作为复制还是移动。 
            // 复制或移动会影响在dragComplete事件管理器中的操作。
            private function dragOverHandler(event:DragEvent):void
            {
                if (event.dragSource.hasFormat("img")) {
                    if (event.ctrlKey) {                    
                        DragManager.showFeedback(DragManager.COPY);
                        return;
                    }
                    else {
                        DragManager.showFeedback(DragManager.MOVE);
                        return;
                    }
                }

                DragManager.showFeedback(DragManager.NONE);
            }
            
            // dragDrop事件管理器设定图片控件在目标容器中的位置。
            private function dragDropHandler(event:DragEvent):void {
              if (event.dragSource.hasFormat("img")) {
                  var draggedImage:Image = 
                    event.dragSource.dataForFormat('img') as Image;
                  var dropCanvas:Canvas = event.currentTarget as Canvas;
              
                  var newImage:Image=new Image();
                  newImage.source = draggedImage.source;
                  newImage.x = dropCanvas.mouseX;
                  newImage.y = dropCanvas.mouseY;
                  dropCanvas.addChild(newImage);
              }
            }
            
            // dragComplete事件管理器用来完成复制或移动图片。
            private function dragCompleteHandler(event:DragEvent):void {
                var draggedImage:Image = 
                    event.dragInitiator as Image;
                var dragInitCanvas:Canvas = 
                    event.dragInitiator.parent as Canvas;

                if (event.action == DragManager.MOVE)
                    dragInitCanvas.removeChild(draggedImage);
            }            
        ]]>
    </mx:Script>

  	<mx:Panel 
        title="不同类型的非列表类控件中复制移动图片示例" width="90%" height="90%"
		horizontalAlign="center"
		verticalAlign="middle">  
	
	    <mx:HBox width="100%" height="100%">
	    	<mx:Canvas 
	    	    width="200" height="200"  
	    	    borderStyle="solid" 
	    	    backgroundColor="#FFF6D5">
	    	    
	    	    <mx:Image id="myimg" 
	    	        source="@Embed(source='./assets/eek.gif')" 
	    	        mouseMove="mouseOverHandler(event);"
	    	        dragComplete="dragCompleteHandler(event);"/> 
	    	</mx:Canvas>
	    	<mx:Canvas
	    	    width="200" height="200"  
	    	    borderStyle="solid" 
	    	    backgroundColor="#FEDEF1"
	    	    dragEnter="dragEnterHandler(event);" 
	    	    dragOver="dragOverHandler(event);"
	    	    dragDrop="dragDropHandler(event);">        
	    	</mx:Canvas>
	    </mx:HBox>
	</mx:Panel>
	
</mx:Application>

iteye_5904

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flex之拖放

1.一个方向的拖放： &lt;?xml version="1.0" encoding="utf-8"?&gt;&lt;!-- dragdrop\SimpleListToListMove.mxml --&gt;&lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="ini.
复制链接

扫一扫