Use flex to implement drag-and-drop Functions

<Mx: Application xmlns: MX = "http://www.adobe.com/2006/mxml" layout = "horizontal"> <br/> <mx: SCRIPT> <br/> <! -- [CDATA [<br/> Import MX. core. bitmapasset; <br/> Import MX. core. dragsource; <br/> Import MX. events. dragevent; <br/> Import MX. managers. dragmanager; <br/> private var xoffset: Number; <br/> private var yoffset: Number; <br/> Private Static const format: String = "box "; </P> <p> // The dragmanager class is used to manage the drag and drop operations performed in your <SPAN class = 'wp _ keywordlink '> Program </span>. When a drag operation is initialized, the drag source <br/> // (Drag Source) is added to dragmanager through the static dodrag method. The component called the release target <br/> // registers the event listener to listen for events triggered by dragmanager. They accept available data sources on dragmanager <br/>. </P> <p> // when the <mx: Box> instance sends a mousedown event, the mousedownhandler method is called and the drag-and-drop source data is added to dragmanager. <br/>. Dragmanager. the dodrag method is initially a drag operation, which requires at least three parameters: Drag <br/> // drag the reference of the initial entry, a MX. core. dragsource object and calling event processor <br/> // flash. events. mouseevent object. This method also includes mouse information related to the release operation. The rendered image <br/> // is a transparent rectangle by default during dragging. You can use the dodrag method to change the image (also known as <br/> // drag-and-drop proxy), but the default parameter value is used in this example. <Br/> private function mousedownhandler (EVT: mouseevent): void <br/>{< br/> xoffset = EVT. localx; <br/> yoffset = EVT. localy; <br/> var initiator: box = EVT. currenttarget as box; <br/> var proxybox: bitmapasset = new bitmapasset (); <br/> proxybox. bitmapdata = new <br/> bitmapdata (initiator. width, initiator. height); <br/> proxybox. bitmapdata. draw (initiator); <br/> var dragsource: dragsource = new dragsource (); <br/> dragsour CE. adddata (initiator, format); <br/> dragmanager. dodrag (initialize, dragsource, EVT, proxybox, 0, 0, 0.5 ); <br/>}</P> <p> // The canvas component is a release target of the initial drag action of the Box component. It assigns an event processor to the <br/> // dragenter and dragdrop events sent by dragmanager. The static method acceptdragdrop of the dragmanager object <br/> // check the drageventhandler method, drag the source data format, and the original set in the dodrag method to activate the drag operation <br/>. The parameter required by the acceptdragdrop method is the drag target to respond to the drag event ). Run <br/> // The drophandler method in sequence to respond to the release action (drop action) and process the moving initiator (in this <br/> // example, the box component) is determined based on the position of the pointer when the mouse is released. <Br/> private function dragenterhandler (EVT: dragevent): void <br/>{< br/> If (EVT. dragsource. hasformat (Format) <br/>{< br/> dragmanager. acceptdragdrop (canvas (EVT. currenttarget); <br/>}</P> <p> private function drophandler (EVT: dragevent ): void <br/> {<br/> var box: box = Box (EVT. draginitiator); <br/> box. X = EVT. localx-xoffset; <br/> box. y = EVT. localy-yoffset; <br/>}< br/>] --> <br/> </MX: SCRIPT> <br/> <mx: canvas id = "canvas" backgroundcolor = "0 xeeeeee" width = "300" Height = "300" dragenter = "dragenterhandler (event);" dragdrop = "drophandler (event ); "> <br/> <mx: Box id =" dragitem "width =" 20 "Height =" 20 "backgroundcolor =" 0x00ffcc "mousedown =" mousedownhandler (event ); "/> <br/> </MX: canvas> <br/> </MX: Application> <br/>