Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
52 lines
No EOL
953 B
HTML
Executable file
52 lines
No EOL
953 B
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>drag</title>
|
|
|
|
<script src="bower_components/evt/index.js"></script>
|
|
<script src="drag.js"></script>
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
|
|
.parent {
|
|
width: 300px;
|
|
height: 100px;
|
|
background: pink;
|
|
}
|
|
|
|
.child {
|
|
width: 100px;
|
|
height: 100px;
|
|
background: red;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="parent" id="container">
|
|
<div class="child" id="handle"></div>
|
|
</div>
|
|
<script>
|
|
var Drag = window.drag;
|
|
var drag = new Drag({
|
|
container: {
|
|
el: container,
|
|
width: container.clientWidth,
|
|
height: container.clientHeight
|
|
},
|
|
handle: {
|
|
el: handle,
|
|
width: handle.clientWidth,
|
|
height: handle.clientHeight,
|
|
x: 0,
|
|
y: 0
|
|
}
|
|
});
|
|
|
|
drag.on('ended', function() {
|
|
drag.snap();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |