forked from jillix/svg.draggy.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
manual-test.html
56 lines (45 loc) · 1.52 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
<!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>
</body>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.js"></script>
<script 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
draw.group().draggable().rect(100,100).center(400, 150);
draw.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);
</script>
</html>