-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdraggy.html
88 lines (82 loc) · 2.66 KB
/
draggy.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
<html>
<head>
<link href="drag.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function() {
/* grab all draggable objects and columns that they can land in. set placeholder var for the current dragged item */
var notes = document.querySelectorAll('.note-container'),
columns = document.querySelectorAll('.column'),
dragSrcEl = null;
/* dragstart and dragend are events that occur on both the drag target and the drop zone */
for (var i=0; i<notes.length; i++) {
notes[i].addEventListener("dragstart", handleDragStart, false);
notes[i].addEventListener("dragstop", handleDragEnd, false);
}
[].forEach.call(columns, function(column) {
column.addEventListener("dragenter", handleDragEnter, false);
column.addEventListener("dragleave", handleDragLeave, false);
column.addEventListener("dragover", handleDragOver, false);
column.addEventListener("drop", handleDrop, false);
});
function handleDragStart(e) {
this.style.opacity = '0.4';
e.effectAllowed = "move";
e.dataTransfer.setData('text/html', this.innerHTML);
dragSrcEl = this;
dragSrcEl.className = 'active';
$(this).css('border', '3px solid gray');
}
function handleDragEnd(e) {
this.style.opacity = '1';
$(this).css('border', 'none');
dragSrcEl.className = '';
}
function handleDragEnter(e) {
if (e.preventDefault) {
e.preventDefault();
}
$(this).css('border', '3px solid gray');
}
function handleDragLeave(e) {
$(this).css('border', 'none');
}
function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault();
e.dataTransfer.dropEffect = "move";
}
else {
return false;
}
}
function handleDrop(e) {
if (e.stopPropagation) {
e.stopPropagation();
}
$(this).css('border', 'none');
// Don't do anything if dropping the same column we're dragging.
if (dragSrcEl != this) {
// Set the source column's HTML to the HTML of the column we dropped on.
dragSrcEl.parentNode.removeChild(dragSrcEl);
$(this).append(dragSrcEl);
}
}
});
</script>
</head>
<body>
<div id="todo" class="column">
<header>To do</header>
<div class="note-container" draggable="true">
<div class="note">hi</div>
</div>
<div class="note-container" draggable="true">
<div class="note">hey</div>
</div>
</div>
<div id="inprogress" class="column">
<header>In Progress</header>
</div>
</body>
</html>