flex控件拖动之这个程序太疯狂

在程序中如果想实现控件的拖动一般的实现思路应该是监听鼠标的按下事件、鼠标的移动事件以及鼠标释放事件。在mousedown的时候做一个flag，表示鼠标已经按下，并且保存鼠标按下时的坐标。然后再mousemove的时候判断flag是否是鼠标按下状态，得到鼠标的偏移量根据移动的偏移量调节控件的位置。最后在mouseup事件中将flag还原。
在flex中这一切变得非常简单，因为flex在Sprite类中定义了两个函数startDrag()和stopDrag()。大家可能对Sprite类不太熟悉。的确直接用到这个类的时候确实不多，但是我们对这个类的子类应该是非常熟悉的UIComponent。哈哈，看到重量级的了吧。UIComponent类可是所有可视控件的鼻祖，也就是说我们能看到的所有的控件都是Sprite的子类。也就意味着所有的可视控件都拥有startDrag()和stopDrag()这两个函数。
这时候大家要问了，说了这个么半天这两个函数有什么特殊之处呢？这和疯狂有什么联系呢？接下来我来说是这个两个疯狂的函数。首先说startDrag，官方文档上是这样描述的：“让使用者拖动制定的Sprite，拖动状态会一直保持，直到明确的调用stopDrag函数或者另外一个Sprite开始拖动。同一个时间内只能有一个Sprite处于拖动状态”。也就是说如果想实现某个控件的拖动，直接调用startDrag函数就可以了，结束拖动就调用stopDrag函数。最原始的控件拖动思想在flex中再无用武之地了。然后再简单提一下stopDarg函数，因为刚才在介绍startDrag函数中已经提到这个函数的作用了，所以直接把官方说明在说一下：“结束startDarg函数。在调用stopDrag函数或者另外一个Sprite被拖动之前Sprite会保持拖动状态。同一个时间内只能有一个Sprite处于拖动状态”。
最简单的实现方法，在想要拖动的控件的mouseDown事件中调用startDrag函数，然后再控件的mouseUp事件中调用stopDrag函数就非常轻松的实现了控件拖动，仅仅只有两行代码。
下面是实现一个按钮拖动的例子：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">
<mx:Button id="btn" mouseDown="startMove(event)" mouseUp="stopMove(event)" label="move"/>
<mx:Script>
<!--[CDATA[
private function startMove(event:Event):void
{
Sprite(event.target).startDrag();
}
private function stopMove(event:Event):void
{
Sprite(event.target).stopDrag();
}
]]-->
</mx:Script>
</mx:Application>

疯狂的时刻！
一个按钮的拖动轻松的实现了，那么其他的控件呢？是不是可以实现一个界面，可以让用户自己把控件摆放到自己喜欢的位置？把其他控件放到工程中试试。
程序代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*" width="669" height="552">
<mx:Button id="btn" mouseDown="startMove(event)" mouseUp="stopMove(event)" label="move"/>
<mx:CheckBox x="10" y="93" label="Checkbox" mouseDown="startMove(event)" mouseUp="stopMove(event)"/>
<mx:ComboBox x="10" y="157" mouseDown="startMove(event)" mouseUp="stopMove(event)"></mx:ComboBox>
<mx:DataGrid x="10" y="225" mouseDown="startMove(event)" mouseUp="stopMove(event)">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
<mx:Panel x="10" y="394" width="370.5" height="138" layout="absolute" mouseDown="startMove(event)" mouseUp="stopMove(event)">
</mx:Panel>
<mx:ApplicationControlBar x="131" y="0" width="444" mouseDown="startMove(event)" mouseUp="stopMove(event)">
<mx:MenuBar width="273" dataProvider="{menubarXML}" labelField="@label" mouseDown="startMove(event)" mouseUp="stopMove(event)"></mx:MenuBar>
</mx:ApplicationControlBar>
<mx:DateChooser x="387" y="93" mouseDown="startMove(event)" mouseUp="stopMove(event)"/>
<mx:Script>
<!--[CDATA[
private var menubarXML:XMLList =
<>
<menuitem label="Menu1">
<menuitem label="MenuItem 1-A" data="1A" url="MyAction.swf"/>
<menuitem label="MenuItem 1-B" data="1B"/>
</menuitem>
<menuitem label="Menu2">
<menuitem label="MenuItem 2-A" type="check"  data="2A"/>
<menuitem type="separator" />
<menuitem label="MenuItem 2-B" >
<menuitem label="SubMenuItem 3-A" type="radio"
groupName="one" data="3A"/>
<menuitem label="SubMenuItem 3-B" type="radio"
groupName="one" data="3B"/>
</menuitem>
</menuitem>
</>;
private function startMove(event:Event):void
{
if (event.target is Sprite)
{
Sprite(event.target).startDrag();
}
}
private function stopMove(event:Event):void
{
if (event.target is Sprite)
{
Sprite(event.target).stopDrag();
}
}
]]-->
</mx:Script>
</mx:Application>

编译运行，你会发现结果并不是我们想象的那样，每个控件都可以拖动，而是有些控件可以完整拖动，有些控件的一部分可以拖动。这些部分可以拖动的控件一般都是复杂复合型的控件，例如日历控件，这些控件可以被拖动到四分五裂，简直是太疯狂啦！
画面初始状态：



http://p.blog.csdn.net/images/p_blog_csdn_net/To9m/EntryImages/20091020/base.PNG

拖动之后的效果：



http://p.blog.csdn.net/images/p_blog_csdn_net/To9m/EntryImages/20091020/after.PNG