4, 简单的拖拽效果

class Main extends egret.DisplayObjectContainer {

    /**
     * 入口文件, 最先执行的构造方法
     * 这会实例化一个和手机屏幕一样大的舞台
     */
    public constructor() {
        super();
        this.once( egret.Event.ADDED_TO_STAGE, this.begin, this );
    }

    /**
     * 入口文件加载成功后执行的方法
     * 也是逻辑的开始, 通过触摸移动显示对象
     */
    private begin(event:egret.Event) {
        /**
         * 定义两个偏移量
         */
        var offsetX:number, offsetY:number;

        /**
         * 画一个红色的圆
         */
        var circle: egret.Shape = new egret.Shape();
        circle.graphics.beginFill(0xff0000);
        circle.graphics.drawCircle(100,100,100);
        circle.graphics.endFill();
        this.addChild(circle);

        /**
         * 开启事件监听 并 绑定回调
         * 实现简单的拖拽
         */
        circle.touchEnabled = true;
        circle.addEventListener(egret.TouchEvent.TOUCH_BEGIN, start, this);
        circle.addEventListener(egret.TouchEvent.TOUCH_MOVE, move, this);
        function start(ev:egret.TouchEvent):void {
            circle.x = ev.stageX - 100;
            circle.y = ev.stageY - 100;
        }
        function move(ev:egret.TouchEvent):void {
            circle.x = ev.stageX - 100;
            circle.y = ev.stageY - 100;
        }

    }

}
时间: 2024-10-07 11:56:17

4, 简单的拖拽效果的相关文章

jquery监听事件on写法以及简单的拖拽效果

引子——关于jquery的某些写法 我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用! 假如用css设置一个属性,我们写法如下: $("#haorooms").css("width","100px"); 假如多个属性呢?我们写法如下: $(".demo").css({"height":"100px","ba

WEB前端开发学习----11. JQuery 实现简单的拖拽效果

拖拽效果在网页中很常见.实现起来也不难.记录一下今天实现的简单效果. 拖拽演示 快速拖动时,会出现问题,以后修改. 说白了,就是3个点击事件. 1. 按下鼠标左键, 触发点击事件,此时记录下可以得到鼠标相对于拖动控件的位置(当前鼠标位置-控件位置): 2. 拖动鼠标,触发移动事件,可以计算出鼠标移动的距离(当前鼠标位置-之前算出的相对位置),也就是拖拽控件所移动的距离: 3. 鼠标抬起,结束拖动. 在JQ中,event.pageX    event.pageY可以获取鼠标的位置,相对于文档左上角

javascript实现最简单的拖拽效果

// by zhangxinxu welcome to visit my personal website http://www.zhangxinxu.com/ // zxx.drag v1.0 2010-03-23 元素的拖拽实现 var params = { left: 0, top: 0, currentX: 0, currentY: 0, flag: false }; //获取相关CSS属性 var getCss = function(o,key){ return o.currentSt

js拖拽效果的原理和实现

让我们了解一下最简单的拖拽效果: 1.首先我们先设置一个div,然后简单设置一下样式: div{ width:50px; height: 50px; background-color: red; position: absolute; } 2.然后我们编写js部分,我们要清楚,元素的拖拽分三个部分:鼠标左键按下.拖动鼠标元素跟着移动.以及鼠标左键抬起停止拖拽元素停止移动 var div = document.querySelector("div");                 

简单的鼠标拖拽效果(原生js实现)

之前在聊天群里看到有人说面试的时候被问到了怎样实现一个拖拽效果,当时看到后在心里默默思考了下,结果发现好像我也写不出来啊.本着遇到一个解决一个的思想,就亲自敲了一个,看到张鑫旭大神写的代码,真的很厉害,多多学习了,(感觉随便搜一个关于前端方面的问题都能看到他的网站,真是太佩服了,写了那么多文章,十分感谢.)好了,接下来就进入正题了.想实现一个效果首先得明白其中的逻辑,知道了实现逻辑后,就可以码代码了.首先我实现的效果是: 鼠标按下后,才可以执行后续效果 鼠标已经按下,然后鼠标移动,需要拖拽的元素

Createjs学习心得之使用EaselJs实现拖拽效果

寒假时跟着老师在做一个createjs+angularjs的html5应用app,因为在这之前完全没了解过createjs这个框架,所以在查找资料时发现,国外官网(http://www.createjs.com)API文档虽是详细,但对于一些英语不太好的童鞋(其实我也是一枚英语渣渣)就比较难理解了.而国内中文社区做的并不好,用户不多,资料翻译准确度不够.所以在这里,我就把我学习Createjs的一些心得体会向大家分享下: 一.什么是CreateJS? createjs是一个轻量级的javascr

拖拽效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽效果</title> </head> <style> body { background: skyblue; } #wrap { margin: 50px auto; width: 400px; height: 400px; bo

React.js实现原生js拖拽效果及思考

一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖拽效果. 首先,其实拖拽效果的思路是很简单的.主要就是三个步骤: 1.onmousedown的时候,启动可拖拽事件,记录被拖拽元素的原始坐标参数. 2.onmousemove的时候,实时记录鼠标移动的距离,结合被拖拽元素第一阶段的坐标参数,计算并设置新的坐标值. 3.onmouseup的时候,关闭可拖拽事件

js实现鼠标的拖拽效果

拖拽效果在我们上网的过程中是很常见的,大家都应该在电脑上面登陆过qq吧,当这个qq的登陆框弹出来的时候,我们是可以进行拖动的.这就是一个拖拽效果 这是我在慕课网上面看到的,我直接拿过来了,地址http://www.imooc.com/learn/60 这个视频讲的蛮好的,一清二楚,不懂的可以去看看. 首先,理清楚一下总体的思路. 第一步:当鼠标按下弹出框某个区域的时候,可以进行拖拽 第二步:弹出框拖拽进行中 第三部:鼠标松开,弹出框拖动到了某个位置. 先上源代码.这个是慕课网的老师提供的 . <