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. whm 设置共享IP

    点击 Main >>Resellers>>resellers centers (manages ressellers center's IP有几个IP代表几个)

  2. 定时且周期性的任务研究II--ScheduledThreadPoolExecutor

    http://victorzhzh.iteye.com/blog/1011635 上一篇中我们看到了Timer的不足之处,本篇我们将围绕这些不足之处看看ScheduledThreadPoolExecu ...

  3. fork,exec,source

    http://alsww.blog.51cto.com/2001924/1113112 http://stackoverflow.com/questions/1127502/start-stop-da ...

  4. C语言写的俄罗斯方块

    源:C语言写的俄罗斯方块 2014年最后一天, 任天堂将风靡全球30年的经典游戏<<俄罗斯方块>>下架. 作为全球最畅销的游戏, 其移植版本遍布各个平台. 下面这个是我去年在5 ...

  5. 红黑树（C#）

    红黑树C#算法. 在线javascript演示地址:http://sandbox.runjs.cn/show/2nngvn8w using System; using System.Collectio ...

  6. /bin/sh 与 /bin/bash 的区别

    /bin/sh 与 /bin/bash 的区别,用 : 截取字符串不是POSIX 标准的. 区别 sh 一般设成 bash 的软链 (symlink) ls -l /bin/sh lrwxrwxrwx ...

  7. iOS开发——NSArray中的字典排序

    手头上碰到一个项目,需要给数组中的字典中的一个字段排序,想了想,干脆再字典中增加一个字段,用来记录需要排序字段的第一个字符,用它来作为比较的对象,进行排序. - (void)viewDidLoad { ...

  8. 结对编程--Goldpoint Game

    黄金点游戏 黄金点游戏描述: N个同学(N通常大于10),每人写一个0~100之间的有理数 (不包括0或100),交给裁判,裁判算出所有数字的平均值,然后乘以0.618(所谓黄金分割常数),得到G值. ...

  9. 6、手把手教你Extjs5（六）继承自定义一个控件

    Extjs的开发都可以遵循OOP的原则,其对类的封装也很完善了.自定义一个控件最简单的办法就是继承一个已有的控件.根据上一节的需要,我做了一个Button的子类.首先根据目录结构,在app目录下建立一 ...

  10. linux分区-df

    转自:http://baike.baidu.com/link?url=tyonI3NCB3F-ytIQz72PY-8uAaUQgfFFXbyKAea1e2NiB_t5AsE0MLOLc2LcqOiS ...