- 浏览: 330445 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
wangjun0603：
学习了，写的真好！
native2ascii的简单应用 -
qq672076266：
...
native2ascii的简单应用 -
loyalboys：
...
native2ascii的简单应用 -
hanjinting1004：
...
Flex开发者需要知道的10件事 -
管好你家猫：
学了，文章，
native2ascii的简单应用
一、最简单的是直接调用ui组件的startDrag方法和stopDragging方法，这2个方法是flash中的所有继承于Sprite类的组件类都支持的。适用于在同一个容器中的拖拽。
思路是监听需要拖拽的组件的MOUSE_DOWN和MOUSE_UP事件，剩下来的有flash帮你自动完成。
例子
private static function init():void{
myVBox.addEventListener(MouseEvent.MOUSE_DOWN,startDragging);
myVBox.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
}
// 按下鼠标按键时会调用此函数。
private static function startDragging(event:MouseEvent):void
{
event.currentTarget.startDrag();
}
// 松开鼠标按键时会调用此函数。
private static function stopDragging(event:MouseEvent):void
{
event.currentTarget.stopDrag();
}
二、借助DragManager实现拖拽。好处是可以方便的控制哪些容器支持被拖拽，也就是方便的订制拖拽的业务规则。适用于多个容器之间的拖拽。
假设把a组件从b容器拖拽到c容器
思路是对a监听鼠标MOUSE_DOWN事件，对c监听DRAG_ENTER和DRAG_DROP事件。其他的由flash完成。
例子
private function init():void
{
a.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
c.addEventListener(DragEvent.DRAG_ENTER,dragEnterHandler);
c.addEventListener(DragEvent.DRAG_DROP,dragDropHandler);
}
private static function mouseDownHandler(event:MouseEvent):void
{
var dragInitiator:UIComponent=UIComponent(event.currentTarget);
var ds:DragSource = new DragSource();
ds.addData(dragInitiator, "myRule");
DragManager.doDrag(dragInitiator, ds, event);
}
private static function dragEnterHandler(event:DragEvent):void {
if (event.dragSource.hasFormat("myRule "))
{
DragManager.acceptDragDrop(event.currentTarget);
}
}
private static function dragDropHandler(event:DragEvent):void {
var dragObject:UIComponent=UIComponent(event.dragInitiator);
dragObject.x = Container(event.currentTarget).mouseX;
dragObject.y =Container(event.currentTarget).mouseY;
if(dragObject.parent!=event.currentTarget){
Container(event.currentTarget).addChild(dragObject);
}
}
以上的例子中，c只接受带有“myRule”格式文字的拖动对象
三、完全自己实现拖拽功能。拖拽无非是ui组件跟着鼠标移动。所以需要监听推拽逐渐的MOUSE_DOWN，MOUSE_UP，MOUSE_MOVE事件，有时拖拽的目标容器也要监听MOUSE_UP事件。然后在MOUSE_MOVE事件的监听函数中改变ui组件的x和y值。相对前两种方法，这种方法实现起来就比较烦琐。具体事件这里就不写了.
总之，在flash的拖拽实现要比在js中容易一些。
thanks：http://blog.csdn.net/twobowl/archive/2009/04/16/4075877.aspx 挺好的总结
next stone : 更加丰富的信息介绍flex拖拽
Adding drag-and-drop support
Visual development environments typically let you manipulate objects in an application by selecting them with a mouse and moving them around the screen. The Adobe® Flex™ Drag and Drop Manager lets you select an object, such as an item in a List control, or a Flex control, such as an Image control, and then drag it over another component to add it to that component. All Flex components support the drag-and-drop operation. Flex also includes additional support for the drag-and-drop operation for certain controls, such as List, Tree, and DataGrid.
The drag-and-drop operation has three main stages: initiation, dragging, and dropping.
Initiation
A user initiates a drag-and-drop operation by using the mouse to select a Flex component or an item in a Flex component, and then moving the component or item while holding down the mouse button. For example, a user selects an item in a List control with the mouse and, while holding down the mouse button, moves the mouse several pixels. The selected component is called the drag initiator .
Dragging
While holding down the mouse button, the user moves the mouse around the Flex application. Flex displays an image during the drag, which is the drag proxy . The drag source (a DragSource object) contains the data being dragged.
Dropping
When a user moves the drag proxy over another Flex component, that component becomes a possible drop target . The drop target can inspect the drag source to determine whether the data is in a format that the target accepts and, if so, let the user drop the data onto it. If the drop target determines that the data is not in an acceptable format, the drop target can disallow the drop operation.
Upon a successful drop operation, Flex adds the data to the target and, optionally, deletes it from its original location.
This Quick Start describes several ways of implementing the drag-and-drop operation in your Flex applications.
Using drag-and-drop with List controls
Several Flex controls include built-in support for the drag-and-drop operation. These are the DataGrid, HorizontalList, List, Menu, PrintDataGrid, TileList, and Tree controls.
You can make these controls drag initiators by setting the
dragEnabled
property to true
. Similarly, you can make
these controls drop targets by setting the dropEnabled
property to
true
. Flex lets you move items by dragging them from a drag-enabled
control to a drop-enabled control, or copy them by dragging while pressing the
Control key.
Copying items by using the drag-and-drop operation
The following example lets you copy items from one List control to another by dragging them. You can copy the same item multiple times from the drag initiator to the drop target.
Example
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
width="365" height="225"
creationComplete="creationCompleteHandler();"
>
<mx:Script>
<![CDATA[
private function creationCompleteHandler():void
{
srclist.dataProvider = ['Reading', 'Skating', 'Movies'];
destlist.dataProvider = [];
}
]]>
</mx:Script>
<mx:Panel title="Select activities" layout="horizontal">
<mx:VBox width="50%">
<mx:Label text="Available activities"/>
<!-- Drag initiator -->
<mx:List
id="srclist" width="100%" height="100"
allowMultipleSelection="true"
dragEnabled="true"
/>
</mx:VBox>
<mx:VBox width="50%">
<mx:Label text="Activities I enjoy"/>
<!-- Drop target -->
<mx:List
id="destlist" width="100%" height="100"
dropEnabled="true"
/>
</mx:VBox>
</mx:Panel>
</mx:Application>
Result
1
To view the full source, right-click the Flex application and select View Source from the context menu.
Moving items by using the drag-and drop operation
The default value of the dragMoveEnabled
property is
false
, which only lets you copy items from one List control to the
other. If you modify the previous example and add the
dragMoveEnabled
property set to true
in the source
List control, you can move and copy elements, as the following example
shows.
The default action is to move the item. To copy an item, hold down the Control key during the drop operation.
Example
<!-- Drag initiator -->
<mx:List
id="srclist" width="100%" height="100"
allowMultipleSelection="true"
dragEnabled="true"
dragMoveEnabled="true"
/>
Result
2
To view the full source, right-click the Flex application and select View Source from the context menu.
Two-way drag-and drop support
You can allow two-way dragging and dropping by setting the
dragEnabled
property and the dropEnabled
property to
true
on both List controls, as follows:
Example
<!-- Both drag initiator and drop target -->
<mx:List
id="srclist" width="100%" height="100"
allowMultipleSelection="true"
dragEnabled="true"
dropEnabled="true"
dragMoveEnabled="true"
/>
<!-- . . . -->
<!-- Both drag initiator and drop target -->
<mx:List
id="destlist" width="100%" height="100"
allowMultipleSelection="true"
dragEnabled="true"
dropEnabled="true"
dragMoveEnabled="true"
/>
Result
3
To view the full source, right-click the Flex application and select View Source from the context menu.
Manually adding drag-and-drop support
To support drag-and-drop operations with non-list-based controls, or with containers, you must explicitly add support by using a series of special classes and events. You use the DragManager, DragSource, and DragEvent classes to implement the drag-and-drop operation.
Flex applications use events to control drag-and-drop operations.
Drag initiator events
When you set a control to act as a drag initiator, you can use the
mouseDown
, mouseMove
, and dragComplete
events to manage the drag-and-drop operation.
The mouseDown and mouseMove events
The mouseDown
event is dispatched when a user selects a control
with the mouse and holds down the mouse button. The mouseMove
event
is dispatched when the mouse moves.
The following example embeds the images of four Euro coins
(1
cent, 2 cent, 5 cent, and 10 cent) and displays them using Image controls. In
each of the Image controls, you listen for the mouseMove
event and
define an event handler method called dragIt()
to handle this
event. In the dragIt()
method, you obtain a reference to the coin
image that the event originated on by using the currentTarget
property of the event
object and save this reference in a local
variable called dragInitiator
.
Next, you create a DragSource
instance and call its
addData()
method to store the value
argument that was
passed to the dragIt()
method. You describe the format of the value
argument by using the String "value"
. You use this string later,
when creating your drop target, to check whether you should allow an item to be
dropped on it.
Because you want to display an image of the coin as the user drags it around,
you create an Image
instance and set its source to the same coin
image that the drag initiator has. You save this image in a local variable
called dragProxy
.
Finally, you call the static doDrag()
method on the DragManager
class and pass it references to the drag initiator, drag source, the event
object, and the drag proxy to start the drag operation.
You can drag the coins around but you cannot drop them anywhere because you haven't defined a drop target. The following section describes how to define a drop target.
Example
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/DragAndDropDragInitiatorEvents/index.html"
width="500" height="160"
>
<mx:Script>
<![CDATA[
import mx.managers.DragManager;
import mx.core.DragSource;
// Embed the various Euro coin images. Images originally
// from Wikipedia (http://en.wikipedia.org/wiki/Euro_coins)
[Embed("assets/1c.png")]
[Bindable]
public var OneCent:Class;
[Embed("assets/2c.png")]
[Bindable]
public var TwoCents:Class;
[Embed("assets/5c.png")]
[Bindable]
public var FiveCents:Class;
[Embed("assets/10c.png")]
[Bindable]
public var TenCents:Class;
private function dragIt(event:MouseEvent, value:uint):void
{
// Get the drag initiator component from the event object.
var dragInitiator:Image = event.currentTarget as Image;
// Create a DragSource object.
var dragSource:DragSource = new DragSource();
// Add the data to the object.
dragSource.addData(value, 'value');
// Create a copy of the coin image to use as a drag proxy.
var dragProxy:Image = new Image();
dragProxy.source = event.currentTarget.source;
// Call the DragManager doDrag() method to start the drag.
DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);
}
]]>
</mx:Script>
<mx:HBox>
<mx:Image
id="oneCent" source="{OneCent}"
mouseMove="dragIt(event, 1);"
/>
<mx:Image
id="twoCents" source="{TwoCents}"
mouseMove="dragIt(event, 2);"
/>
<mx:Image
id="fiveCents" source="{FiveCents}"
mouseMove="dragIt(event, 5);"
/>
<mx:Image
id="tenCents" source="{TenCents}"
mouseMove="dragIt(event, 10);"
/>
</mx:HBox>
</mx:Application>
Result
4
To view the full source, right-click the Flex application and select View Source from the context menu.
Drop target events
The drop target can use various events, the most important of which are the
dragEnter
, dragDrop
, and dragExit
events.
The dragEnter
event
The dragEnter
event is dispatched when a drag proxy moves over
the drop target from outside the drop target. A component must
define
an event listener for this event to be a drop target. In the listener, you can
change the appearance of the drop target to provide visual feedback to the user
that the component can accept the drag operation. For example, you can draw a
border around the drop target, or give focus to the drop target.
The dragExit
event
The dragExit
event is dispatched when the user drags outside the
drop target, but does not drop the data onto the target. You can use this event
to restore the drop target to its normal appearance if you modified its
appearance in response to a dragEnter event or other event.
The dragDrop
event
The dragDrop
event is dispatched when the user releases the
mouse over the drop target. You can use this event listener to add the drag data
to the drop target.
In the following example you create a Box container to act as the drop target and define handlers to listen for the dragEnter, dragExit and dragDrop events. The Box container has a Label control inside it that you use to display the total of the coins dropped onto the Box.
In the event handler for the dragEnter
event, you check that the
drag source contains the "value"
format. Only objects that contain
this format (i.e., coins in this example) may be dropped on the drop target. If
it does, you visually indicate to the user that she may drop the item on the Box
by increasing the thickness of the Box container's border. You also inform the
DragManager that the Box container will accept the drag initiator by calling its
acceptDragDrop()
method.
In the event handler for the dragExit
event, you restore the
visual appearance of the Box container to indicate that the drag proxy is no
longer over it.
Finally, in the event handler for the dragDrop
event, which gets
called after the user has dropped a coin onto the drop target, you increase the
value of the totalValue
counter by the value of the coin that was
dropped on to the Box and revert the Box container to indicate that the drop
operation is complete.
Example
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
width="525" height="270"
viewSourceURL="src/DragAndDropDragDropTargetEvents/index.html"
>
<mx:Script>
<![CDATA[
import mx.events.DragEvent;
import mx.containers.Box;
import mx.managers.DragManager;
import mx.core.DragSource;
// Embed the various Euro coin images. Images originally
// from Wikipedia (http://en.wikipedia.org/wiki/Euro_coins)
[Embed("assets/1c.png")]
[Bindable]
public var OneCent:Class;
[Embed("assets/2c.png")]
[Bindable]
public var TwoCents:Class;
[Embed("assets/5c.png")]
[Bindable]
public var FiveCents:Class;
[Embed("assets/10c.png")]
[Bindable]
public var TenCents:Class;
[Bindable]
private var totalValue:uint;
private function dragIt(event:MouseEvent, value:uint):void
{
// Get the drag initiator component from the event object.
var dragInitiator:Image = event.currentTarget as Image;
// Create a DragSource object.
var dragSource:DragSource = new DragSource();
// Add the data to the object.
dragSource.addData(value, 'value');
// Create a copy of the coin image to use as a drag proxy.
var dragProxy:Image = new Image();
dragProxy.source = event.currentTarget.source;
// Call the DragManager doDrag() method to start the drag.
DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);
}
// Called if the user drags a drag proxy onto the drop target.
private function dragEnterHandler(event:DragEvent):void
{
// Get the drop target component from the event object.
var dropTarget:Box=event.currentTarget as Box;
// Accept the drag only if the user is dragging data
// identified by the 'value' format value.
if (event.dragSource.hasFormat('value'))
{
// Make the border of the Box thicker to
// visually signal to the user that they can
// drop the coin there.
dropTarget.setStyle("borderThickness", 5);
// Accept the drop.
DragManager.acceptDragDrop(dropTarget);
}
}
// Called if the user drags the drag proxy away from the drop target.
private function dragExitHandler(event:DragEvent):void
{
// Get the drop target component from the event object.
var dropTarget:Box=event.currentTarget as Box;
// Set the border of the Box to its default value
// to visually indicate that the user is no longer
// over the drop target.
revertBoxBorder();
}
// Called if the target accepts the dragged object and the user
// releases the mouse button while over the drop target.
private function dragDropHandler(event:DragEvent):void
{
// Get the data identified by the color format from the drag source.
var value:uint = event.dragSource.dataForFormat('value') as uint;
// Add the value to the total
totalValue += value;
// Set the border of the Box to its default value
revertBoxBorder();
}
// Helper method to revert the Box's border to a 1 pixel outline.
private function revertBoxBorder():void
{
amountDisplay.setStyle("borderThickness", 1);
}
]]>
</mx:Script>
<mx:HBox>
<mx:Image
id="oneCent" source="{OneCent}"
mouseMove="dragIt(event, 1);"
/>
<mx:Image
id="twoCents" source="{TwoCents}"
mouseMove="dragIt(event, 2);"
/>
<mx:Image
id="fiveCents" source="{FiveCents}"
mouseMove="dragIt(event, 5);"
/>
<mx:Image
id="tenCents" source="{TenCents}"
mouseMove="dragIt(event, 10);"
/>
</mx:HBox>
<mx:Box
id="amountDisplay"
borderStyle="solid" borderColor="#000000" backgroundColor="#FFFFFF"
width="100%" height="100" horizontalAlign="center" verticalAlign="middle"
dragEnter="dragEnterHandler(event);"
dragExit="dragExitHandler(event);"
dragDrop="dragDropHandler(event);"
>
<mx:Label text="{totalValue + ' pence'}" fontSize="48"/>
</mx:Box>
</mx:Application>
Result
5
To view the full source, right-click the Flex application and select View Source from the context menu.
thanks：http://www.adobe.com/devnet/flex/quickstart/adding_drag_and_drop/
中文翻译见：http://www.flexs.cn/post/flex3_dragEnter_080305.html
这里也有一些总结：http://blog.csdn.net/pengpeng2395/archive/2009/06/01/4232795.aspx
发表评论
-
应用避免访问浏览器缓存
2011-05-12 17:33 1324项目经常遇到这么个问题：程序做了改动之后，由于浏览 ... -
flex皮肤资源
2011-05-05 15:28 1276如果要找flex皮肤，这里的皮肤真是多。http: ... -
flex利用asdoc生成doc和制作chm
2011-04-02 17:33 1599How to set up ASDoc in Flex Bui ... -
restrict的应用实例
2011-04-02 11:54 10961. 限制某个字符的输入，用符号 ^ 跟上要限制的 ... -
flex中as、instanceof、is、 typeof用法
2011-03-24 09:48 4526“as” 我主要用它做类型转化 假设有一个类叫做 ... -
在Chart上画平均线的三种方法
2011-02-16 14:52 1388在Chart上画平均线的三种方法 ... -
Flex Frameworks
2010-11-12 15:32 973Some say that if a t ... -
flex4国际化
2010-11-11 16:56 2091国际化变得如此简单 <?xml versi ... -
使用ToolTipManager自定义tooltip
2010-11-05 14:52 2586直接贴代码，一看就懂。 <?xml version=& ... -
flex 校验
2010-11-05 14:41 1001①flex中的校验可以使用mx.validator ... -
Flex中的fx、mx和s命名空间
2010-11-05 13:12 3341Flex 4带给我们的 ... -
socket中writeUTF和writeUTFBytes的区别
2010-11-03 10:25 2768Q：用writeUTF发送数据的时候，后台多 ... -
修改flex默认loading
2010-10-18 13:51 2487一： SWF Flex 2 PreloaderSWF ... -
AIR文件操作
2010-09-26 10:01 2881AIR文件操作(一):AIR文件基础 AI ... -
ActionScript 3.0 Socket编程
2010-09-17 17:25 1144在使用ActionScript3.0进行编程的时候需要注 ... -
as 对象深度拷贝
2010-08-20 10:32 958这是一篇关于as3中对象深度拷贝的问题今天自己总结下,便 ... -
Create a FlexUnit TestCase
2010-04-29 20:34 1004Problem How to create a Fle ... -
as3corelib
2010-04-29 20:10 1460google code ：http://code. ... -
FusionCharts
2010-04-28 19:26 2342无意中接触到这个产品FusionCharts,3D ... -
flex datagrid自动换行
2010-04-19 17:10 2859以为datagrid的自动换行有多复杂，其实 ...
相关推荐
flex拖拽flex拖拽flex拖拽flex拖拽flex拖拽flex拖拽
flex真是个很强大的工具，当然demo也是我们学习的主要方法，flex拖拽画矩形，很流畅的，一点不卡
flex 拖拽功能 flex 拖拽功能中文文档
Flex拖拽库Flex拖拽库flex拖拽库
flex 练习拖拽的例子，很简单，可以了解一下原理
Flex 模拟地图 放大缩小 拖动限制功能
flex拖拽树控件 添加 删除节点 拖拽生成节点
Flex 拖拽例子 从不同组件间拖拽 可以自定义拖拽的视图
flex 拖拽效果程序，效果很好，代码简单
高级flex 曲线图 效果实现， Flex 拖动，滚动曲线图 LineChart 非常的使用
Flex拖拽编程详解，Flex拖动方法。
Flex 实例,flex拖拽形成柱状图,点击弹出图片窗口,柱状图用法
flex 可拖动的树形自定义控件，从左选项框拖动到右选项框
Flex拖动购物车很Cool给大家更多的帮助
NULL 博文链接：https://moguicy.iteye.com/blog/1746096
一个基于flex的拖拽框架，可以通过框架类直接塞入需要拖拽的控件达到效果，还有实现了服务
一个自定义的拖拽flex控件，可以实现复制拖拽，不复制拖拽，可以拖拽图片，也可以由文字拖拽后变成图片。
这个是个简单的Flex3.0拖拽图片的代码，里面的图片自己可以换一个。希望对大家有用。
flex实现的拖拽效果,对flex的学习者有一定的帮助