Flash/Flex学习笔记(13):对象拖动(startDrag/stopDrag)

简介: Flash中只有影片MovieClip(准确的讲是Sprite)可以调用startDrag,endDrag,创建对象拖动最简单的办法只要调用这二个方法即可 myobj.addEventListener(MouseEvent.

Flash中只有影片MovieClip(准确的讲是Sprite)可以调用startDrag,endDrag,创建对象拖动最简单的办法只要调用这二个方法即可

myobj.addEventListener(MouseEvent.MOUSE_DOWN,pickup);
myobj.addEventListener(MouseEvent.MOUSE_UP,place);

function pickup(e:MouseEvent ):void {	
	//trace("鼠标按下");	
	e.target.startDrag();	
}

function place(e:MouseEvent):void {
	//trace("鼠标抬起");	
	e.target.stopDrag();
}

其中myobj是舞台上的随便一个MovieClip实例

startDarg还能在拖动时,设定拖动的边界:

var ball:Ball=new Ball(30,Math.random()*0xffffff);

var posX:Number =  stage.stageWidth /2;
var posY:Number =  stage.stageHeight/2;
var rectSize:Number = 200;

ball.x = posX;
ball.y = posY;

addChild(ball);

ball.addEventListener(MouseEvent.MOUSE_OVER,function(){Mouse.cursor = MouseCursor.HAND });
ball.addEventListener(MouseEvent.MOUSE_OUT,function(){Mouse.cursor = MouseCursor.AUTO });
ball.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler);

function MouseDownHandler(e:MouseEvent) {
	stage.addEventListener(MouseEvent.MOUSE_UP, MouseUpHandler);
	//第一参数如果为true,则表示拖动时,鼠标所在点自动对齐对象中心--即所谓的锁定中心
	ball.startDrag(true,new Rectangle(posX-rectSize/2, posY-rectSize/2, rectSize, rectSize));
	//画出边界,方便更直观显示
	graphics.clear();
	graphics.lineStyle(1);
	graphics.drawRect(posX-rectSize/2, posY-rectSize/2, rectSize, rectSize);
}

function MouseUpHandler(e:MouseEvent) {
	ball.stopDrag();
}

下面再来一个稍复杂一点的示例:

R1.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler);
R1.addEventListener(MouseEvent.MOUSE_UP,MouseUpHandler);
R2.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler);
R2.addEventListener(MouseEvent.MOUSE_UP,MouseUpHandler);
R3.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler);
R3.addEventListener(MouseEvent.MOUSE_UP,MouseUpHandler);

//trace(numChildren);//当前舞台上的元素总数

var _originPoint:Point = new Point();

//拖动开始时
function MouseDownHandler(e:MouseEvent) {
	//trace(e);
	
	//保存原始位置(拖动完成时恢复用)	
	_originPoint.x=e.target.x;
	_originPoint.y=e.target.y;
	
	e.target.startDrag();

	setChildIndex(DisplayObject(e.target), numChildren-1);//设置拖动对象的zIndex,否则有可能在拖动过程中被其它组件挡住
	
	//拖动时显示阴影
	var _shadow:DropShadowFilter = new DropShadowFilter();
	_shadow.distance=10;
	_shadow.alpha=0.5;
	_shadow.color = 0xFFFFFF;
	e.target.filters=[_shadow];
	
	Mouse.cursor = MouseCursor.HAND;

}

//拖动完成时
function MouseUpHandler(e:MouseEvent) {
	e.target.stopDrag();
	e.target.filters=null;
	
	if (e.target.dropTarget is Shape){
		e.target.dropTarget.transform.colorTransform=e.target.transform.colorTransform; //将目标对象颜色设置为与源对象一致
	}	
	//还原初始位置
	e.target.x = _originPoint.x;
	e.target.y = _originPoint.y;
	
	Mouse.cursor = MouseCursor.ARROW;
}

 

源文件下载:http://cid-2959920b8267aaca.skydrive.live.com/self.aspx/Flash/DragObject.rar

目录
相关文章
|
内存技术 JavaScript 前端开发
Flash/Flex学习笔记(8):ActionScript3.0中的面对对象
首先要习惯AS3.0的几个BT约定: 1.一个.as文件中,只能定义一个类2.类名称必须与.as的文件名相同3.类定义中必须要有package包声明4.一个类最多只能有一个构造函数 5.包package的路径/名称约定: 这个初次接触时感觉有点小复杂,这样描述吧: 如果您在定义一个类时,pa...
1225 0
|
JavaScript 前端开发 内存技术
Flash/Flex学习笔记(9):ActionScript3.0与Javascript的相互调用
原理跟Silverlight中的几乎如出一辙(见Silverlight如何与JS相互调用): ActionScript3代码: btnCallJs.addEventListener(MouseEvent.
972 0
|
内存技术
Flash/Flex学习笔记(15):FMS 3.5之远程共享对象(Remote Shared Object)
FMS中的“远程共享对象”可以让多个Client端的flash应用共享同一个全局对象,并且当客户端中的任何一个改变该对象时,系统会自动将该对象回发到FMS服务器,同时FMS服务器也会将该对象重新广播到所有客户端。
1104 0
|
内存技术
Flash/Flex学习笔记(21):利用colorTransform改变对象的颜色及透明度
transform是flash.Display.DisplayObject的属性之一,而colorTransform又是transform的属性,这也就意味着几乎所有对象都可以使用colorTransform属性   这是官方的解释: 当 ColorTransform 对象应用于显示对象时,将...
910 0
|
内存技术
Flash/Flex学习笔记(30):不用startDrag和stopDrag的对象拖动
对于从Sprite类继承来的对象,要实现拖放当然是Flash/Flex学习笔记(13):对象拖动(startDrag/stopDrag) 里讲的方法最方便,但是对于不是从Sprite类继承得来的对象,这startDrag/stopDrag是不能用的,这时候只能采用最通常用做法:利用Mouse_Dow...
863 0
|
内存技术
Flash/Flex学习笔记(31):对象拖拽与投掷
对象拖拽: 这其实就是以前所学知识:Flash/Flex学习笔记(13):对象拖动(startDrag/stopDrag) + Flash/Flex学习笔记(23):运动学原理 的综合运用,要提一下的是下面代码中对于EnterFrame的添加与移除操作 package { import flash.
1006 0
|
内存技术
Flash/Flex学习笔记(35):如何正确监听Stage对象的事件
如果想在一个自定义类中注册对stage对象的监听事件,然后在另一个文档类中使用该类的实例(或在fla的时间轴上使用该类的实例),你会很郁闷的发现:在构造函数中始终无法引用到this.stage(用trace(this.
695 0
|
8月前
|
前端开发 算法 Java
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
268 1
|
8月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
527 0
|
设计模式 容器
13.HarmonyOS流式卡片列表实现指南:Flex多行布局详解
在现代移动应用开发中,流式卡片列表是一种常见且实用的UI设计模式。它能够自适应屏幕宽度,在有限空间内高效展示多个内容项。本教程将详细讲解如何使用HarmonyOS的ArkUI框架中的Flex组件实现一个灵活的流式卡片列表,重点关注多行布局与对齐策略的应用。
421 2