forked from svgdotjs/svg.draggable.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmanual-test.html
68 lines (56 loc) · 1.98 KB
/
manual-test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>svg.js</title>
<style type="text/css">
html, body, #drawing {
width: 100%;
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="drawing"></div>
<script src="https://rawgit.com/wout/svg.js/2.0.1/dist/svg.js"></script>
<script src="src/svg.draggable.js"></script>
<script>
var e, t, s
, draw = SVG('drawing').attr({ 'font-size': 10 }).fill('#f06')
/* plain draggable */
draw.rect(100,100).center(150, 150).draggable()
draw.plain('just plain draggable').center(150, 210)
/* grouped draggable */
var g = draw.group().draggable()
g.rect(100,100).center(400, 150);
g.plain('grouped draggable').center(400, 210);
/* constraind with object */
e = draw.rect(100,100).center(650, 150).draggable({ minX: 400, minY: 50, maxX: 800, maxY: 400 })
e.on('dragstart', function() {
s = e.clone().opacity(0.2)
t = draw.rect(400, 350).move(400, 50).fill('none').stroke('#0fa')
});
e.on('dragmove', function() {
s.animate(200, '>').move(e.x(), e.y())
});
e.on('dragend', function() {
t.remove()
s.remove()
});
draw.plain('constrained with object and ghost').center(650, 210)
/* constraind with function */
draw.rect(100,100).center(900, 150).draggable(function(x, y) { return { x: x < 1000, y: y < 300 } })
draw.plain('constraint with function').center(900, 210)
/* group with multiple levels of draggables (dragging a part doesn't drag the group) */
var g2 = draw.group().draggable()
for( var i=0; i<4; i++ ) {
var cx = (i&1) ? -25:25
var cy = (i&2) ? -25:25
g2.rect(50,50).center(cx,cy).draggable()
}
g2.plain('grouped with multiple levels of draggable').center(0, 70);
g2.move(1150,150)
</script>
</body>
</html>