@4keys/svg.draggable.js 中文文档教程
svg.draggable.js
svgdotjs.github.io 库的插件，使元素可拖动。
Svg.draggable.js 根据 MIT 许可证的条款获得许可。
Usage
安装插件：
bower install svg.draggable.js
在 html 文档中包含 svg.js 库后包含此插件。
<script src="svg.js"></script>
<script src="svg.draggable.js"></script>
要使元素可拖动，只需在元素中调用 draggable()
var draw = SVG('canvas').size(400, 400)
var rect = draw.rect(100, 100)
rect.draggable()
是的，就是这样！ 现在 rect 是可以拖动的了。
Events
该插件触发 4 个不同的事件，
- beforedrag (cancelable)
- dragstart
- dragmove (cancelable)
- dragend
您可以将侦听器绑定/取消绑定到此事件：
// bind
rect.on('dragstart.namespace', function(event){
// event.detail.event hold the given data explained below
})
// unbind
rect.off('dragstart.namespace')
event.detail
beforedrag、dragstart、dragmove 和 dragend 为您提供 event 和计算阻力的 handler。 除了 beforedrag 之外，事件还为您提供：
detail.mtransformation matrix to calculate screen coords to coords in the elements userspacedetail.ppageX and pageY transformed into the elements userspace
cancelable events
您可以通过调用 event.preventDefault 来阻止 在回调函数中。 在这种情况下不会拖动形状。 如果您想实现自己的拖动处理，这将很有帮助。beforedrag 和 dragmove 的默认操作()
rect.draggable().on('beforedrag', function(e){
e.preventDefault()
// no other events are bound
// drag was completely prevented
})
rect.draggable().on('dragmove', function(e){
e.preventDefault()
this.move(e.detail.p.x, e.detail.p.y)
// events are still bound e.g. dragend will fire anyway
})
Constraint
拖动功能可以限制在给定的框中。 您可以将约束值作为对象传递：
rect.draggable({
minX: 10
, minY: 15
, maxX: 200
, maxY: 100
, snapToGrid: 20
})
对于更多动态约束，也可以传递一个函数：
rect.draggable(function(x, y) {
return { x: x < 1000, y: y < 300 }
})
注意每个给定的约束都是在元素坐标系中计算的，而不是在屏幕空间
Remove
中可以删除可拖动功能，再次使用 false 作为参数调用可拖动功能：
rect.draggable(false)
Restrictions
- If your root-svg is transformed this plugin won't work properly (Viewbox is possible)
- Furthermore it is not possible to move a rotated or flipped group properly. However transformed nested SVGs are possible and should be used instead.
Dependencies
此模块需要 svg.js >= v2.0.1
svg.draggable.js
A plugin for the svgdotjs.github.io library to make elements draggable.
Svg.draggable.js is licensed under the terms of the MIT License.
Usage
Install the plugin:
bower install svg.draggable.js
Include this plugin after including the svg.js library in your html document.
<script src="svg.js"></script>
<script src="svg.draggable.js"></script>
To make an element draggable just call draggable() in the element
var draw = SVG('canvas').size(400, 400)
var rect = draw.rect(100, 100)
rect.draggable()
Yes indeed, that's it! Now the rect is draggable.
Events
The Plugin fires 4 different events
- beforedrag (cancelable)
- dragstart
- dragmove (cancelable)
- dragend
You can bind/unbind listeners to this events:
// bind
rect.on('dragstart.namespace', function(event){
// event.detail.event hold the given data explained below
})
// unbind
rect.off('dragstart.namespace')
event.detail
beforedrag, dragstart, dragmove and dragend gives you the event and the handler which calculates the drag. Except for beforedrag the events also give you:
detail.mtransformation matrix to calculate screen coords to coords in the elements userspacedetail.ppageX and pageY transformed into the elements userspace
cancelable events
You can prevent the default action of beforedrag and dragmove with a call to event.preventDefault() in the callback function. The shape won't be dragged in this case. That is helpfull if you want to implement your own drag handling.
rect.draggable().on('beforedrag', function(e){
e.preventDefault()
// no other events are bound
// drag was completely prevented
})
rect.draggable().on('dragmove', function(e){
e.preventDefault()
this.move(e.detail.p.x, e.detail.p.y)
// events are still bound e.g. dragend will fire anyway
})
Constraint
The drag functionality can be limited within a given box. You can pass the the constraint values as an object:
rect.draggable({
minX: 10
, minY: 15
, maxX: 200
, maxY: 100
, snapToGrid: 20
})
For more dynamic constraints a function can be passed as well:
rect.draggable(function(x, y) {
return { x: x < 1000, y: y < 300 }
})
Note that every constraint given is evaluated in the elements coordinate system and not in the screen-space
Remove
The draggable functionality can be removed calling draggable again with false as argument:
rect.draggable(false)
Restrictions
- If your root-svg is transformed this plugin won't work properly (Viewbox is possible)
- Furthermore it is not possible to move a rotated or flipped group properly. However transformed nested SVGs are possible and should be used instead.
Dependencies
This module requires svg.js >= v2.0.1
