DragManager

Escrito el 23/10/2005 por Xavi Beumala

Flex Framework introduces a DragManager. This manager allows us to convert nearly anything into draggable. This way it's quite easy to drag and drop items between datagrids and between components. But also we can use it within our custom classes.

The example shows how to manage new drag and drop capabilities letting you drag a dog image. If you hit ctrl key while dragging a new copy of the image is created.

The code is quite dirty but I'm just playing arround it. On the other hand it's mxml based, right now I'm trying to do the same in AS3 but I'm having some problems and runtime exceptions.

The manager is event based (as near everything in AS3) and manages where we can drag the element and where not. When dropped into a valid target this target is notified.


<?xml version="1.0" ?>

<mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml">
    <mx:Script>
        <![CDATA[
            import mx.managers.DragManager;
            import mx.core.DragSource;
            import mx.events.DragEvent;
            import flash.events.MouseEvent;
            import flash.events.MouseEventType;
            import mx.controls.Image;
            import mx.containers.Canvas;
            import flash.util.trace;
			
			[Embed(source="dog.swf")]
  			private var dog:Class;
  			
            private function drag(event:MouseEvent, img1:Image, format:String)
            {
                var dragInitiator:Image=Image(event.currentTarget);
                var ds:DragSource = new DragSource();
                ds.addData(img1, format);                

                var imageProxy:Image = new Image();
                imageProxy.source = dog;

                DragManager.doDrag(dragInitiator, ds, event, imageProxy,0, 0, 1.00);
            }
            
            private function dragEnter(event:DragEvent) {
                DragManager.acceptDragDrop(Canvas(event.target));
            }
			
			private function dragEnable (event:MouseEvent) {
				drag (event, Image(event.currentTarget),"img");	
			}
			
            private function dragDrop(event:DragEvent, target1:Canvas, format:String) {
                if (event.ctrlKey) {
                	var i:Image = new Image();
                	i.source = dog;
                	i.x = target1.mouseX;
                	i.y = target1.mouseY;
                	v1.addChild(i);
                	i.addEventListener(MouseEventType.MOUSE_MOVE,dragEnable);
                } else {
                	var items:Image = event.dragSource.dataForFormat("img");
                    items.x = target1.mouseX;
                    items.y = target1.mouseY;
                }
            }
			
			private function dragOver(event:DragEvent):Void {
			    if (event.ctrlKey) {
			        DragManager.showFeedback(DragManager.COPY);
			    } else {
			        DragManager.showFeedback(DragManager.MOVE);
			    }
			}
        ]]>
    </mx:Script>
    
    <mx:Panel width="100%" height="100%" title="Drag And Drop Example">
    	<mx:VBox width="100%" height="100%">
    		<mx:Text text="Drag And Drop the dog. If you want to make a copy just hit ctrl while dragging."
    				 height="10%" width="100%"/>
		    <mx:Canvas id="v1" width="100%" height="90%" dragEnter="dragEnter(event)" 
		        dragDrop ="dragDrop(event, v1, 'img')" borderStyle="solid" 
		        backgroundColor="#DDDDDD" dragOver="dragOver(event)"
		        x="0" y="0">
		        <mx:Image id="myimg" source="{dog}" mouseMove="drag(event, myimg, 'img')" /> 
		    </mx:Canvas>
		</mx:VBox>
	</mx:Panel>
</mx:Application>

Comments

El 10/11/2006 Shivanand Tori escribió:

Pls Let me konw can we insert this code in our ASPX Page and where to insert it. Waiting for your Reply.

El 27/11/2006 www escribió:

accoppiamento sexy puttanelle vecchie culone ragazze grasse scopate passera foto flesy pussy penetrazioni estreme maiale negre culetti sodi