直接上代码:
<code>
<?xml version="1.0"?>
<!-- dragdrop\DandDImageCopyMove.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal">
<mx:Script>
<![CDATA[
import mx.managers.DragManager;
import mx.core.DragSource;
import mx.events.DragEvent;
import flash.events.MouseEvent;
// Embed icon image.
[Embed(source='../assets/r1.jpg')]
public var globeImage:Class;
// The mouseMove event handler for the Image control
// functioning as the drag initiator.
private function mouseOverHandler(event:MouseEvent):void
{
var dragInitiator:Image=Image(event.currentTarget);
var ds:DragSource = new DragSource();
ds.addData(dragInitiator, "img");
// The drag manager uses the image as the drag proxy
// and sets the alpha to 1.0 (opaque),
// so it appears to be dragged across the canvas.
var imageProxy:Image = new Image();
imageProxy.source = globeImage;
imageProxy.height=100;
imageProxy.width=100;
DragManager.doDrag(dragInitiator, ds, event,
imageProxy, -15, -15, 1.00);
}
// The dragEnter event handler for the Canvas container
// functioning as the drop target.
private function dragEnterHandler(event:DragEvent):void {
if (event.dragSource.hasFormat("img"))
DragManager.acceptDragDrop(Canvas(event.currentTarget));
}
// The dragOver event handler for the Canvas container
// sets the type of drag-and-drop
// operation as either copy or move.
// This information is then used in the
// dragComplete event handler for the source Canvas container.
private function dragOverHandler(event:DragEvent):void
{
if (event.dragSource.hasFormat("img")) {
if (event.ctrlKey) {
DragManager.showFeedback(DragManager.COPY);
return;
}
else {
DragManager.showFeedback(DragManager.MOVE);
return;
}
}
DragManager.showFeedback(DragManager.NONE);
}
// The dragDrop event handler for the Canvas container
// sets the Image control's position by
// "dropping" it in its new location.
private function dragDropHandler(event:DragEvent):void {
if (event.dragSource.hasFormat("img")) {
var draggedImage:Image =
event.dragSource.dataForFormat('img') as Image;
var dropCanvas:Canvas = event.currentTarget as Canvas;
// Since this is a copy, create a new object to
// add to the drop target.
var newImage:Image=new Image();
newImage.source = draggedImage.source;
newImage.x = dropCanvas.mouseX;
newImage.y = dropCanvas.mouseY;
dropCanvas.addChild(newImage);
}
}
// The dragComplete event handler for the source Canvas container
// determines if this was a copy or move.
// If a move, remove the dragged image from the Canvas.
private function dragCompleteHandler(event:DragEvent):void {
var draggedImage:Image =
event.dragInitiator as Image;
var dragInitCanvas:Canvas =
event.dragInitiator.parent as Canvas;
if (event.action == DragManager.MOVE)
dragInitCanvas.removeChild(draggedImage);
}
]]>
</mx:Script>
<!-- Canvas holding the Image control that is the drag initiator. -->
<mx:Canvas
width="250" height="500"
borderStyle="solid"
backgroundColor="#DDDDDD">
<!-- The Image control is the drag initiator and the drag proxy. -->
<mx:Image id="myimg"
source="@Embed(source='../assets/r1.jpg')"
mouseMove="mouseOverHandler(event);"
dragComplete="dragCompleteHandler(event);"/>
</mx:Canvas>
<!-- This Canvas is the drop target. -->
<mx:Canvas
width="250" height="500"
borderStyle="solid"
backgroundColor="#DDDDDD"
dragEnter="dragEnterHandler(event);"
dragOver="dragOverHandler(event);"
dragDrop="dragDropHandler(event);">
</mx:Canvas>
</mx:Application>
</code>
分享到:
相关推荐
flex实现了图片的拖拽功能,包括,拖动图片不删除原来图片,和拖动图片删除原来图片
一个自定义的拖拽flex控件,可以实现复制拖拽,不复制拖拽,可以拖拽图片,也可以由文字拖拽后变成图片。
flex实现对图片的旋转与拖动,简单的小例子,希望对大家有所帮助
批量上传,图片以缩略图排列,双击查看大图;设了回收站,通过拖动就可删除或还原需上传的图片;可为每个图片起别名,该别名会作为参数传到后台;通过 servlet实现上传。
Flex 实现的截图。一个是通过鼠标左键拖拽,类似qq截图。另一个是初始时就有矩形截图框,截图狂可以通过拖拽进行放大缩小。被截的背景图一种是图片尺寸的放大缩小,一种是图片所在画布的Scale方式放大缩小。
本文实例为大家分享了css3实现图片拖拽效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type=...
在FlexBuilder中设置MXML编译器选项 1.5节.在FlexBuilder外部编译Flex项目 1.6节.在MXML中添加事件监听器 1.7节.设置子节点属性 1.8节.定义数组和对象 1.9节.在ActionScript中设置变量的作用域 1.10节.在...
批量上传,图片以缩略图排列,双击查看大图;设了回收站,通过拖动就可删除或还原需上传的图片;可为每个图片起别名,该别名会作为参数传到后台;通过 servlet实现上传。
功能终于告一段落了,实现了预期的功能。遇到了一个小麻烦,js 会把某些变量( 如果你是通过对象的方式传递的,将在传递之后丢失类型信息 ,后面*号部分)
lazyload是图片懒加载特效源码 demo是官方提供的,针对一些难点,我在上面添加一些注释 bezierDemo是仿qq消息气泡拖拽消失的效果 spa是单页应用,纯jq+html+css实现的 rem+flex是响应式布局 zepto的demo就是:...
可以实现sprite 缩小时更换图片 鼠标拖拽左右滑动可以控制速度!
跨平台,Balsamiq Mokups是用Flex和Air实现的,所以在Mac OS, Linux和Windows下都能使用; 不仅仅有桌面版本,还有能集成在Confluence,JIRA,和XWiki中的版本,使得异地在线协作更方便有效。 可以用命令行进行...
将图片直接从剪贴板中粘贴到工程文件夹的文件中。 屏幕设计程序 可同时打开多个设计文档并能使用分页界面在文档间快速切换。 可使用标准Windows元素创建图形用户界面(GUI)屏幕,包括框架窗口、会话、菜单、...
如何在Asp.Net1.1中实现页面模板(所谓的MasterPage技术) Tool Tip 示例(FILTER版) Tool Tip示例 (htc版) 一个.net发送HTTP数据实体的类 按键跳转以及按Enter以不同参数提交,及其他感应事件 动态控制Page页的...
Flex实现table布局 模拟电池充电 二维码、条形码扫码自定义 Css打字机效果 瀑布流布局(纵向数据) 瀑布流布局(横向数据) 自定义验证码输入、密码输入使用 数字滚动 屏幕文字滚动效果 保存图片 Loading图-总...