实现svg拖拽的js插件-svg.draggable.js

当前位置:主页 > Html5库 > SVG > 实现svg拖拽的js插件-svg.draggable.js
实现svg拖拽的js插件-svg.draggable.js
分享:

    插件介绍

    svg.draggable.js是一款基于svg.js的html5 svg拖拽插件。该插件可以使用svg.js生成的svg图像具有拖拽功能,并且可以限制拖拽范围,还可以制作拖拽幻影特效。该插件需要svg.js v0.11以上版本的支持。

    浏览器兼容性

    浏览器兼容性
    时间:2015-01-31
    阅读:
简要教程

svg.draggable.js是一款基于 svg.jshtml5 svg 拖拽插件。该插件可以使用 svg.js 生成的 svg 图像具有拖拽功能,并且可以限制拖拽范围,还可以制作拖拽幻影特效。该插件需要svg.js v0.11以上版本的支持。

使用方法

要使用该svg拖拽插件,首先要在HTML中引入svg.js和svg.draggable.js文件。

<script src="svg.min.js"></script>
<script src="svg.draggable.js"></script>
                

要使svg元素具有拖拽性,可以按下面的方法:

var draw = SVG('canvas').size(400, 400)
var rect = draw.rect(100, 100)

rect.draggable()
                

现在,你绘制的矩形就可以自由拖拽了。

回调函数

有4个可用的回调函数:beforedragdragstartdragmovedragend。下面是它们的使用方法:

rect.dragstart = function() {
  ...do your thing...
}
                

beforedrag带有一个event参数:

rect.beforestart = function(event) {
  ...do your thing...
}
                

dragstartdragmovedragend带有两个参数:第一个参数delta是一个对象,第二个参数是事件:

rect.dragmove = function(delta, event) {
  console.log(delta.x, delta.y)
}
                

拖动范围约束

可以将svg的拖动功能约束在给定的范围内,可以以对象的形式给出约束范围:

rect.draggable({
  minX: 10
, minY: 15
, maxX: 200
, maxY: 100
})
                

如果需要动态约束svg拖拽,可以使用一个函数:

rect.draggable(function(x, y) {
  return { x: x < 1000, y: y < 300 }
})
                

销毁拖动功能

可以通过fixed()方法来禁止svg元素的拖拽功能。

rect.fixed()
                

Viewbox

如果你拖拽元素是一个Viewbox,你需要将他们设置为相同的宽高比。例如,如果你正在使用viewbox='0 0 150 100',那么你就应该像下面这样设置相同的宽高比:

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