当前位置：首页 > 网页特效 > svg

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

分类：svg 日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
<script src="svg.min.js"></script>
<script src="svg.draggable.js"></script>
```
要使svg元素具有拖拽性，可以按下面的方法：

```html
var draw = SVG('canvas').size(400, 400)
var rect = draw.rect(100, 100)
 
rect.draggable()
```
现在，你绘制的矩形就可以自由拖拽了。

##### 回调函数
有4个可用的回调函数：beforedrag、dragstart、dragmove和dragend。下面是它们的使用方法：

```html
rect.dragstart = function() {
  ...do your thing...
}
beforedrag带有一个event参数：

rect.beforestart = function(event) {
  ...do your thing...
}
```
dragstart、dragmove和dragend带有两个参数：第一个参数delta是一个对象，第二个参数是事件：

```html
rect.dragmove = function(delta, event) {
  console.log(delta.x, delta.y)
}
```
##### 拖动范围约束
可以将svg的拖动功能约束在给定的范围内，可以以对象的形式给出约束范围：
```html

rect.draggable({
  minX: 10
, minY: 15
, maxX: 200
, maxY: 100
})
```
如果需要动态约束svg拖拽，可以使用一个函数：

```html
rect.draggable(function(x, y) {
  return { x: x < 1000, y: y < 300 }
})
```
##### 销毁拖动功能
可以通过fixed()方法来禁止svg元素的拖拽功能。

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

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