拖拽操作产生拖拽镜像的方法

任何继承自IUIComponent的组件都可在DragManager时产生拖拽镜像,这里自己写的是透明度0.8
方法执行:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   minWidth="955" minHeight="600">
	<s:layout>
		<s:BasicLayout />
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.core.DragSource;
			import mx.core.IUIComponent;
			import mx.managers.DragManager;

			private function onMouseDown(event:MouseEvent):void{
				var _panel:Panel = event.currentTarget as Panel;
				event.stopImmediatePropagation();
				var _drag:DragSource = new DragSource();
				_drag.addData(_panel, "panel");
				DragManager.doDrag(_panel, _drag, event, 
					ui2Image(_panel), 0, 0, 0.8);
			}

			public static function ui2Image(ui:IUIComponent):Image{
				var _data:BitmapData = new BitmapData(ui.width, ui.height);
				_data.draw(ui);
				const _image:Image = new Image();
				_image.width = ui.width;
				_image.height = ui.height;
				_image.source = new Bitmap(_data);
				return _image;
			}
		]]>
	</fx:Script>
	<s:Panel mouseDown="onMouseDown(event)" width="320" height="240">
		<s:layout>
			<s:VerticalLayout paddingLeft="20" gap="20" />
		</s:layout>
		<s:Label text="文本" />
		<s:TextInput text="文本信息" />
		<s:VGroup width="100%" height="100%" horizontalAlign="center" 
				verticalAlign="middle">
			<mx:Image source="pizazz/flex4/assets/image/pic_help.png" 
				width="40" height="40" />
			<mx:Image source="pizazz/flex4/assets/image/pic_options.png" 
				width="40" height="40" />
		</s:VGroup>
	</s:Panel>
</s:Application>

视图:
拖拽操作产生拖拽镜像的方法

你可能感兴趣的:(UI,xml)