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

实现HTML5 SVG拖拽的JavaScript库插件

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

简介

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

```html
<script src="js/svg.js"></script>
<script src="js/svg.draggy.js"></script> 
```               
#####  HTML结构
你可以使用一个di>作为SVG元素的容器。

```html
<div class="svg-container"></div>        
```        
#####  初始化插件
首先需要在容器中将SVG绘制出来，然后就可以通过draggy()方法使其可以进行拖拽。

```html
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：包含原始事件的对象。
事件的使用方法例如下面的样子：

```html
rect.on("dragstart", function(event) {
    // Do something
});
rect.on("beforedrag", function(event) {
    // Do something
});
rect.on("dragmove", function(event) {
    // Do something
});         
```       
#### 小技巧

------------

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

```html
rect.draggy({
    minX: 10,
    minY: 15,
    maxX: 200,
    maxY: 100
});     
```           
如果需要更动态的约束拖拽范围，可以这样做：

```html
rect.draggy(function(x, y) {
    return { x: x < 1000, y: y < 300 };
});  
```              
通过下面的方式可以轻松实现一些捕捉功能。

```html
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()方法来移除。

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

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

web299.com

实现HTML5 SVG拖拽的JavaScript库插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果