html
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
<!DOCTYPE html>
<html>
<head>
<title>DaD</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/NoxFly/Drag-and-Drop/drag.min.js"></script>
</head>
<body>
<div id='wrapper'>
<div id="div1" class="draggable">contain</div>
<div id="div2" class="draggable">grid<br>+ contain</div>
<div id="div3" class="draggable">axis x</div>
<div id="div4" class="draggable">grid<br>+ axis y</div>
<div id="div5" class="draggable">grid<br>+ axis x<br>+ contain</div>
</div>
<div id='log'>
<div id="mc"><span>Mouse coord:</span> <i>mouse never appear</i></div>
<div id="os"><span>Object selected:</span> <i>none</i></div>
<div id="cp"><span>Current Obj. Pos:</span> <i>null</i></div>
<div id="rp"><span>Relative Pos:</span> <i>null</i></div>
<div id="sp"><span>Starting pos:</span> <i>null</i></div>
<div id="rsp"><span>Relative starting Pos:</span> <i>null</i></div>
</div>
<div id='explanations'>
<h2>Thanks to run this code !<br><span>(read this before testing code)</span></h2>
Enter to Rename, Shift+Enter to Preview
css
css
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
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
body {
margin: 0;
margin-top: 400px;
font-family: Verdana;
}
#wrapper {
background: #eee;
width: 100vw;
height: 400px;
margin: auto;
box-sizing: border-box;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: -50;
}
#wrapper div {
background: rgba(255,0,0,0.5);
width: 55px;
height: 55px;
border-radius: 6px;
margin: 5px;
cursor: default;
Enter to Rename, Shift+Enter to Preview
js
js
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
window.onload = function() {
// querySelector - faster call
function $(el) {
return document.querySelector(el);
}
// detect mouse position
document.addEventListener('mousemove', function(e) {
$('#mc i').innerHTML = `x: ${e.clientX} | y: ${e.clientY}`;
});
// create all draggable elements
var drags = [
new Drag('#div1', {
containment: '#wrapper'
}),
new Drag('#div2', {
grid: [20,20],
containment: '#wrapper'
}),
new Drag('#div3', {
axis: 'x'
}),
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run