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. 使用Three.js渲染Sketchup导出的dae

    打算做个轮盘游戏,直接上3D吧. 第一步:制作模型 3DMax和Maya下载和破解比较麻烦, 就用之前的Sketchup来试试吧. 最后效果图: 俯视图 仰视图 制作步骤: 1 先画一个圆 2 从圆心 ...

  2. IDEA github的应用

    1.下载并安装一个git 一直点下一步就可以 2.去github官网注册一个账号 https://github.com/ 2.1点击Sign up 进入注册页面 2.2填写注册信息,点击Create ...

  3. php script 的生命周期

    原文地址:https://support.cloud.engineyard.com/hc/en-us/articles/205411888-PHP-Performance-I-Everything-Y ...

  4. vs 2012svn 插件设置

  5. javascript open window

    参数 | 取值范围 | 说明alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后 alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上 depended ...

  6. JAVA语法题

    import java.util.*; public class Birthdays { public static void main(String[] args){ Map<Friends, ...

  7. iOS之PCH文件

    在Xcode6之前,创建一个新工程xcode会在Supporting files文件夹下面自动创建一个“工程名-Prefix.pch”文件,也是一个头文件,pch头文件的内容能被项目中的其他所有源文件 ...

  8. 如何把程序钉到Windows7任务栏(修正版)

    源:如何把程序钉到Windows7任务栏(修正版) 在CSDN论坛看到有网友提问如何把程序钉到Windows7的任务栏,ccrun(妖哥)对这个问题很感兴趣,于是google了一下,没有找到相关的AP ...

  9. Quick Cocos2dx 与 Eclipse 连真机debug遇到的问题

    今天下午解决了因为偷懒一直忍受的两个让我不爽很久了的问题: 1Eclipse无法连接手机调试的问题. 在设备管理器中看到的Android设备有黄色的感叹号, 说明驱动不是最新的. 按照网上搜到的解决方 ...

  10. Education Round16

    A题:题意:给定国际象棋king的坐标,求能向几个方向移动分析:处理一下边界情况,其他的都是8 #include <iostream> #include <cstdio> #i ...