html5 拖拽 编辑 插件,实现HTML5 SVG拖拽的JavaScript库插件

svg.draggy.js是一款可以实现拖拽SVG的JavaScript工具库插件。该SVG工具库插件通过简单的设置，就可以实现任何SVG图形的拖拽互动。你可以设置SVG元素的拖动范围和拖动残影效果。

使用方法

要使用该插件需要在页面中引入svg.js和svg.draggy.js文件。

HTML结构

你可以使用一个

作为SVG元素的容器。

初始化插件

首先需要在容器中将SVG绘制出来，然后就可以通过draggy()方法使其可以进行拖拽。

var draw = new SVG('svg-container').size(400, 400);

var rect = draw.rect(100, 100);

rect.draggy();

事件

该svg拖拽插件有4个可用的事件：

beforedrag

dragstart

dragmove

dragend

该svg拖拽插件的event对象也有一些额外的自定义数据对象。

event.detail.delta：一个对象，包含：

x和y：元素的坐标。

movedX和movedY：元素移动的总距离(在dragmove事件中可用)。

event.detail.event：包含原始事件的对象。

事件的使用方法例如下面的样子：

rect.on("dragstart", function(event) {

// Do something

});

rect.on("beforedrag", function(event) {

// Do something

});

rect.on("dragmove", function(event) {

// Do something

});

小技巧

范围约束

SVG元素的拖动范围可以约束在一个范围之内。约束的范围值可以通过一个对象传入。

rect.draggy({

minX: 10,

minY: 15,

maxX: 200,

maxY: 100

});

如果需要更动态的约束拖拽范围，可以这样做：

rect.draggy(function(x, y) {

return { x: x < 1000, y: y < 300 };

});

通过下面的方式可以轻松实现一些捕捉功能。

var snapRange = 50;

rect.draggy(function (x, y, elem) {

var res = {};

res.x = x - (x % snapRange);

res.y = y - (y % snapRange);

return res;

});

移除

SVG元素的拖拽功能可以通过fixed()方法来移除。

rect.fixed();

viewBox

如果你在父元素上使用一个viewBox，那么它们的宽高比必须相同。例如：如果使用viewbox='0 0 150 100'，那么你的父容器的width和height属性可以是600和400，比例必须相同。

var draw = SVG('paper').attr('viewBox', '0 0 150 100').size(600, 400);