<pre id="apoeq"></pre>

10.2.指定一個(gè)拖拽代理

2024-04-27 13:52:08

字體：大中小

供稿：網(wǎng)友

10.2.1 問(wèn)題
你希望在拖拽開(kāi)始時(shí)自定義一幅圖像來(lái)表現(xiàn)這個(gè)被拖拽的對(duì)象。
10.2.2 解決辦法
為DragManager.doDrag 方法的可選參數(shù)dragImage 指定一幅自定義圖像。
10.2.3. 討論
默認(rèn)情況下，在拖拽操作中使用的圖像是一個(gè)包含透明度的矩形。這個(gè)在拖操作開(kāi)始時(shí)被渲染的顯示對(duì)象被稱(chēng)為拖拽代理。通過(guò)給dragImage 參數(shù)傳遞一個(gè)IFlexDisplayObject 實(shí)例，你可以改變這幅圖像。Flex 框架提供的絕大部分組件都能用作拖拽代理，因?yàn)樗鼈兌紨U(kuò)展了mx.core.UIComponent 類(lèi)，而該類(lèi)實(shí)現(xiàn)了IFlexDisplayObject 接口。雖然添加一個(gè)拖拽代理是表現(xiàn)物體正被移動(dòng)到何處的一個(gè)簡(jiǎn)單方法，但這樣做更多是為了防止不必要的誤拖拽。BitmapAsset 類(lèi)同樣實(shí)現(xiàn)了IFlexDisplayObject 接口，并且它能方便地抓取應(yīng)用程序中正在移動(dòng)的可視對(duì)象的位圖數(shù)據(jù)。

在本示例中，我們?yōu)橐粋€(gè)拖拽操作指定一個(gè)BitmapAsset 實(shí)例作為拖拽代理：

-XML

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
<mx:Script>
<![CDATA[
import mx.core.BitmapAsset;
import mx.core.DragSource;
import mx.events.DragEvent;
import mx.managers.DragManager;
private var xoffset:Number;
private var yoffset:Number;
private static const FORMAT:String = "box" ;
private function mouseDownHandler(evt:MouseEvent ):void {
xoffset = evt.localX;
yoffset = evt.localY;
var initiator:Box = evt.currentTarget as Box;
var proxyBox:BitmapAsset = new BitmapAsset();
proxyBox.bitmapData = New BitmapData(initiator.width,initiator.height );
proxyBox.bitmapData.draw( initiator );
var dragSource:DragSource = new DragSource();
dragSource.addData( initiator, FORMAT );
DragManager.doDrag( initiator, dragSource, evt,proxyBox, 0, 0, 0.5 );
}
private function dragEnterHandler( evt:DragEvent ):void {
if ( evt.dragSource.hasFormat( FORMAT ) ) {
DragManager.acceptDragDrop(Canvas(evt.currentTarget));
}
}
private function dropHandler( evt:DragEvent ):void {
var box:Box = Box( evt.dragInitiator );
box.x = evt.localX - xoffset;
box.y = evt.localY - yoffset;
}

]]>
</mx:Script>
<mx:Canvas id="canvas" backgroundColor="0xEEEEEE" width="300" height="300"
dragEnter="dragEnterHandler(event);" dragDrop="dropHandler(event);">
<mx:Box id="dragItem" width="20" height="20" backgroundColor="0x00FFCC" mouseDown="mouseDownHandler(event);" />
</mx:Canvas>
</mx:Application>