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. mysql Explain 性能分析关键字

    EXPLAIN 输出格式select_typetabletypepossible_keyskeykey_lenrowsExtra MySQL 提供了一个 EXPLAIN 命令, 它可以对 SELECT ...

  2. 使用response实现文件下载注意点

    创建web工程,使用response实现文件的下载. 在webRoot下创建download文件,里面包含要下载的文件,现在把源码贴上来,然后再说我遇到的问题 public class DownLoa ...

  3. C++多线程一

    CreateThread()创建一个新的线程. ExitThread()正常的结束一个线程的执行. CloseHandle()关闭一个线程的句柄. CreateThread()函数原型如下: HAND ...

  4. LCD12864 液晶显示-汉字及自定义显示（串口）

    在网上找了许久,发现FPGA用串口驱动LCD12864程序很少,基本上没有.刚开始窃喜,中间郁闷,最后还是高兴,为什么这样说呢!头一回在没有参考程序的情况下,完全是照时序图写(自信),中间调试过程遇到 ...

  5. 最短路径问题 HDU 3790

    最短路径问题 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  6. CTabCtrl

    转载至 http://blog.csdn.net/jacklam200/archive/2008/08/01/2753797.aspx 一.在对话框视图中加入CTabCtrl控件 资源ID:IDC_T ...

  7. javascript 基础系列（二）

    原文参考:http://www.cnblogs.com/libin-1/p/5955208.html 下图是用Illustrator制作的可视化信息图,希望能帮你理清Javascript对象与__pr ...

  8. office web apps部署（一）

    准备两台服务器,A服务器作为域控制器,B服务器安装owa 1.配置域服务器A 参考 2.B服务器加入A所创建的域 参考 3.B服务器安装owa 参考 注意: 1.B服务器加入域后,使用A服务器的管理员 ...

  9. UIScroll和UIPickView

    .h #import <UIKit/UIKit.h> #define WIDTH self.view.frame.size.width #define HEIGHT self.view.f ...

  10. SecureCRT 密钥生成 SSH 使用密钥登陆 服务器

    1.首先“Tool”-“Create Public Key” 2. 选择RSA 模式 4. 创建短语密码 5. 密钥长度为1024 6. 选择标准的 key  , 下面是生成的路径 二 . 配置 SS ...