实现HTML5 SVG拖拽的JavaScript库插件

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

使用方法

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

<script src="js/svg.js"></script>
<script src="js/svg.draggy.js"></script>                
              

HTML结构

你可以使用一个<div>作为SVG元素的容器。

<div class="svg-container"></div>                
              

初始化插件

首先需要在容器中将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);                
              

svg.draggy.js插件github地址：https://github.com/jillix/svg.draggy.js