Raphael的拖动处理：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Title</title>

<script type="text/javascript" src="js/jquery-1.11.1.js"></script>

<script type="text/javascript" src="js/raphael.js"></script>

<script type="text/javascript" src="js/index011.js"></script>

</head>

<body>

<div id="container1"></div>

<div id="container2"></div>

<div id="container3"></div>

<div id="container4"></div>

</body>

</html>
$(function() {

    // 第一种拖动方式；

    initRaphael();

    // 第二种拖动方式；

    initRaphael2();

    // 多个transform没有累加效果，只有最后一个有效；

    initRaphael3();

    // 拖拽集合情况；

    initRaphael4();

});

function initRaphael(e) {

    // 第二种初始化Raphael的方式;

    var paper = Raphael('container1', 500, 500);

    var circle = paper.circle(120, 110, 25).attr('fill', 'yellow');

    circle.drag(dragmove, dragstart, dragend);

    // dx,dy是移动的增量，增量都是相对开始位置计算的，x,y是移动到的位置；

    function dragmove(dx, dy, x, y, e) {

        // 这样的拖拽只能是有cx,cy属性的才可以拖动；

        this.attr({

            cx : x,

            cy : y

        });

        console.log("dx:" + dx);

        console.log("dy:" + dy);

        console.log("x:" + x);

        console.log("y:" + y);

    }

    // 默认情况还是有5个参数的；arguments.length=5;

    function dragmove1(e) {

        console.log(arguments.length);

        console.log('0:' + arguments[0]);

        console.log('1:' + arguments[1]);

        console.log('2:' + arguments[2]);

        console.log('3:' + arguments[3]);

        console.log('4:' + arguments[4]);

    }

    function dragstart(x, y, e) {

        this.attr('fill', 'orange');

    }

    function dragend(e) {

        this.attr('fill', 'yellow');

    }

}

function initRaphael2(e) {

    // 在不同的div中设置svg对象；

    var paper = new Raphael('container2', 500, 500);

    var circle = paper.circle(120, 110, 25).attr('fill', 'yellow');

    circle.drag(dragmove, dragstart, dragend);

    function dragstart(x, y, e) {

        this.current_transform = this.transform();

        console.log('start transform::' + this.current_transform);

        this.attr('fill', 'orange');

    }

    function dragmove(dx, dy, x, y, e) {

        // 使用transform进行属性设置；

        console.log('move transform::' + this.current_transform + 'T' + dx + ',' + dy);

        this.transform(this.current_transform + 'T' + dx + ',' + dy);

    }

    function dragend(e) {

        this.current_transform = this.transform();

        console.log('end transform::' + this.current_transform);

        this.attr('fill', 'yellow');

    }

}

function initRaphael3(e) {

    var paper = new Raphael('container3', 500, 500);

    // 多个transform，移动的距离不会进行积累，会按照最后一个的数据进行移动

    paper.ellipse(300, 200, 50, 20).attr('fill', 'green').transform('T5000,1000').transform('T50,10');

}

function initRaphael4(e) {

    var paper = new Raphael('container4', 500, 500);

    var dice = paper.set();

    dice.push(paper.rect(10, 10, 60, 60, 4).attr('fill', '#FFF'));

    dice.push(paper.circle(22, 58, 5).attr('fill', '#000'));

    dice.push(paper.circle(58, 22, 5).attr('fill', '#000'));

    dice.push(paper.circle(40, 40, 5).attr('fill', '#000'));

    dice.push(paper.circle(22, 22, 5).attr('fill', '#000'));

    dice.push(paper.circle(58, 59, 5).attr('fill', '#000'));

    dice.data('myset', dice);

    // 集合拖拽情况；

    dice.drag(function(dx, dy, x, y, e) {

        var myset = this.data('myset');

        myset.transform(this.data('mytransform') + 'T' + dx + ',' + dy);

        // 用下面这样的方式也可以进行；

        // dice.transform(this.data('mytransform')+'T'+dx+','+dy);

    }, function(x, y, e) {

        var myset = this.data('myset');

        myset.data('mytransform', this.transform());

        // 用下面这样的方式也可以进行；

        // dice.data('mytransform',this.transform());

    }, function(e) {

        var myset = this.data('myset');

        myset.data('mytransform', this.transform())

        // 用下面这样的方式也可以进行；

        // dice.data('mytransform',this.transform());

    });

}

Raphael的拖动处理的更多相关文章

  1. Raphael path 拖动实现

    让 Raphael 的 Path 动起来 Raphaël 是一个很实用的线上矢量图操作 Javascript 库.使用简单,一个值得一提的卖点是通过抽象出共同的接口屏蔽了 SVG 和 VML 之间的差 ...

  2. 学习RaphaelJS矢量图形包--Learning Raphael JS Vector Graphics中文翻译（一）

    (原文地址:http://www.cnblogs.com/idealer3d/p/LearningRaphaelJSVectorGraphics.html) 前面3篇博文里面,我们讲解了一本叫做< ...

  3. CSharpGL(39)GLSL光照示例：鼠标拖动太阳（光源）观察平行光的漫反射和镜面反射效果

    CSharpGL(39)GLSL光照示例:鼠标拖动太阳(光源)观察平行光的漫反射和镜面反射效果 开始 一图抵千言.首先来看鼠标拖动太阳(光源)的情形. 然后是鼠标拖拽旋转模型的情形. 然后我们移动摄像 ...

  4. Android开发学习之路-RecyclerView滑动删除和拖动排序

    Android开发学习之路-RecyclerView使用初探 Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析 Android开 ...

  5. 【Android】 修复ijkPlayer进行m3u8 hls流播放时seek进度条拖动不准确的问题

    项目中使用的播放器是ijkPlayer,发现播放切片特点的hls流(m3u8格式的视频)拖动seekBar的时候会莫名的跳转或者seek不到准确的位置,发现网友也遇到了同样的问题,ijk的开发者也说明 ...

  6. 自己封装的一个原生JS拖动方法。

    代码: function drag(t,p){ var point = p || null, target = t || null, resultX = 0, resultY = 0; (!point ...

  7. 基于Metronic的Bootstrap开发框架经验总结（13）--页面链接收藏夹功能的实现2（利用Sortable进行拖动排序）

    在上篇随笔<基于Metronic的Bootstrap开发框架经验总结(12)--页面链接收藏夹功能的实现>上,我介绍了链接收藏夹功能的实现,以及对收藏记录的排序处理.该篇随笔主要使用功能按 ...

  8. jQuery拖动剪裁图片作为头像

    图片上传是许多网站的一个常用的功能,有时需要对上传的图片做初步的选择裁剪,比如上传头像.下面就是一个使用HTML5+jQuery实现的图片上传裁剪特效,可以对选择要上传的图片做缩小.放大.拖动和裁剪, ...

  9. SharePoint 2013 通过JavaScript实现列表标题列宽度可拖动

    前言 最近有个新需求,用户希望标题栏可以拖动宽度,其实觉得没什么用,既然用户要了又推不掉,就勉为其难实现一下吧. 其实原理比较简单,就是利用JavaScript对标题栏进行宽度控制,然后从网上搜了一下 ...

随机推荐

  1. File和byte[]转换

    http://blog.csdn.net/commonslok/article/details/9493531 public static byte[] File2byte(String filePa ...

  2. [iOS Animation]CALayer-图层时间

    图层时间 时间和空间最大的区别在于,时间不能被复用 -- 弗斯特梅里克 在上面两章中,我们探讨了可以用CAAnimation和它的子类实现的多种图层动画.动画的发生是需要持续一段时间的,所以计时对整个 ...

  3. rest第一篇

    rest的作用 : 以http请求的格式提供数据 实际项目中,定义一个模块,从http请求中拿参数,然后访问mysql数据库得到数据,返回给http请求.

  4. ARM-LINUX学习笔记-（虚拟机linux串口终端以及USB程序下载，基于TQ2440）

    昨天安装了ssh服务之后今天在windows上用xshell登陆发现登录不上,原因是使用了virtualbox的NAT模式,在NAT模式下,客户机可以很方便地上网,但是想要链接宿主机就需要打开网络地址 ...

  5. net stop 出现1060错误

    net stop时出现1060错误,答案: 原来,net stop后面不能想当然地加上服务,而要在‘服务’里看看,那个服务究竟叫什么名字. 比如,我的mysql安装时不叫mysql,而是mysql5 ...

  6. 《算法导论》2.3-7 检查集合中是否存在两数字和为指定的X--算法和证明

    习题2.3-7:设计一个算法,对于一个给定的包含n个整数的集合S和另一个给定的整数X,该算法可以在时间内确定S中是否存在两个元素,使得它们的和恰为X. 解题思路:首先应该想到的是先用一个的排序算法对S ...

  7. (中等) HDU 1828 Picture，扫描线。

    Problem Description A number of rectangular posters, photographs and other pictures of the same shap ...

  8. 《算法导论》归并排序----merge-sort

    伪代码请见<算法导论>2.3节 merge-sort实现: public class MergeSort {        public static void sort(double [ ...

  9. ucos互斥信号量解决优先级反转问题

    在可剥夺性的内核中,当任务以独占方式使用共享资源的时候,会出现低优先级任务高于高优先级任务运行的情况,这种情况叫做优先级反转,对于实时操作系统而言,这是一场灾难,下面我们来说说优先级反转的典型环境. ...

  10. Maven的安装和使用

    http://repo.spring.io/release/org/springframework/spring/ 安装配置:https://segmentfault.com/a/1190000003 ...