-
Notifications
You must be signed in to change notification settings - Fork 0
/
test_draggable.html
140 lines (131 loc) · 5.18 KB
/
test_draggable.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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="icon" href="" />
<title>Draggable test</title>
</head>
<body>
<div id="main"></div>
<style>
body {
background-color: gray;
}
.testbox {
background-color: red;
height: 100px;
width: 100px;
}
</style>
<script type="text/javascript" src="lib/coherent/coherent.js"></script>
<script type="text/javascript" src="lib/react/react.js"></script>
<script type="text/javascript" src="lib/react/react-dom.js"></script>
<script type="text/javascript">
// Request animationFrame https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
window.requestAnimationFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var util = {
onMouseLeaveWindow: function (callback) {
return function (e) {
if (e.relatedTarget == null)
callback()
}
}
}
</script>
<script type="text/javascript">
var MainApp = React.createClass({
render: function () {
return (
React.createElement('div', { className: 'MainApp' },
React.createElement(DraggableWindow)
)
)
}
})
var draggableWindow_needForRAF
var DraggableWindow = React.createClass({
getInitialState: function () {
return {
customStyle: {},
offsetX: 0,
offsetY: 0
}
},
componentWillMount: function () {
var parent = this
engine.on('enableDrag', function () {
draggableWindow_needForRAF = true
window.addEventListener('mousemove', parent.drag);
window.addEventListener('mouseup', parent.endDrag);
window.addEventListener('mouseout', util.onMouseLeaveWindow(parent.endDrag))
})
engine.on('setPosition', function (left, top) {
left = Math.max(Math.min(left, window.innerWidth - 100), 0)
top = Math.max(Math.min(top, window.innerHeight - 100), 0)
parent.setState({
customStyle: {
position: 'fixed',
left: left + 'px',
top: top + 'px',
right: 'unset',
bottom: 'unset'
}
})
})
},
endDrag: function () {
console.log("end dragg")
window.removeEventListener('mousemove', this.drag);
window.removeEventListener('mouseup', this.endDrag);
window.removeEventListener('mouseout', util.onMouseLeaveWindow(parent.endDrag))
},
drag: function (e) {
var parent = this
//console.log("drag to " + e.pageX + ", " + e.pageY)
if (draggableWindow_needForRAF) {
draggableWindow_needForRAF = false
requestAnimationFrame(function () {
draggableWindow_needForRAF = true
engine.trigger('setPosition', e.pageX - parent.state.offsetX, e.pageY - parent.state.offsetY)
})
}
},
render: function () {
var parent = this
return (
React.createElement('div', {
className: 'testbox',
style: parent.state.customStyle,
onMouseDown: function (e) {
var clickType = e.nativeEvent.which
console.log("clicktype: " + clickType)
if (clickType == 3) {
parent.setState({ offsetX: e.nativeEvent.offsetX, offsetY: e.nativeEvent.offsetY })
engine.trigger('enableDrag')
}
},
onContextMenu: function (e) {
e.preventDefault()
},
draggable: true
})
)
}
})
ReactDOM.render(React.createElement(MainApp, {}), document.getElementById('main'))
window.addEventListener('contextmenu', function (e) { // Not compatible with IE < 9
e.preventDefault();
}, false)
</script>
<!-- Load test data after everything is rendered - comment this out in production -->
</body>
</html>