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. Activity进程和线程之间的关系

    1,四大组件并不是程序(进程)的全部,只是他的零件. 2,应用程序启动后,将创建ActivityThread主线程. 3,同一包中的组件将运行在想通的进程空间里面. 4,不同包中的组件可以通过一定的方 ...

  2. mac版MyEclipse的安装及创建web项目

    这两天快被MyEclipse整死了,因为电脑是mac系统的,安装MyEclipse mac破解版时一直是不成功,弄了一天多才行,接着创建web项目HttpServlet在Tomcat发布时总是出现40 ...

  3. 可能是最简单的方式：利用Eclipse创建基于Maven的Web项目

    1. 新建一个maven项目 2.在弹出框中选择创建一个简单项目 3. 然后输入参数,需要注意的是,在packagin中,选择war,web项目应该选择war 4. 点击finish后,基本项目结构就 ...

  4. 触发器（基本的SR触发器、同步触发器、D触发器）

    一.能够存储1位二值信号的基本单元电路统称为触发器(Filp-Flop) 触发器是构成时序逻辑电路的基本逻辑部件.它有两个稳定状态:“0”和“1”.在不同的输入情况下,它可以被置0状态或1状态,当输入 ...

  5. thin-provisioning-tools

    公司我还用着squeeze,没这个包,下载编译:https://github.com/jthornber/thin-provisioning-tools.git

  6. offsetTop、clientTop、scrollTop、offsetTop各属性介绍

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...

  7. Sping--AOP--Annotation

    Aspectj 概念: 1. joinpoint:切入点, 比如@Before, @After, @Around 2. Pointcut:切入点集合, 比如 @Pointcut("execu ...

  8. Mysql update语句赋值嵌套与在表列中数据后面增加数据

    1.Mysql update语句赋值嵌套select  点击(此处)折叠或打开 update a set col=(select col from a where id='5') where id&g ...

  9. WIFI机器人网

    WIFI机器人网 WIFI智能小车机器人 外网远程控制WIFI智能小车机器人(WIFI板/703N)

  10. delphi 中COPY（）函数的意思

    Trim(copy(m,11,5)):copy里面的3个参数(m,11,5)分别是什么意思?COPY还有其他的参数吗? m :就是copy源,就是一个字符串,表示你将要从m里copy一些东西11 : ...