to-do-1
to-do-2
to-do-3
to-do-4
to-do-5
to-do-6
<style>
.to-do-item{
height:100%;
width:100%;
display:block;
cursor:grabbing;
text-align:center;
font-size:40px;
color: red;
}
.to-do-tab {
height: 50px;
width: 80%;
display: block;
position: relative;
margin: 10px 0;
}
#to-dos{
display:block;
height:100%;
width:100%;
position:relative;
}
#to-dos>div:nth-child(2n+1){
background-color:yellow;
}
#to-dos>div:nth-child(2n) {
background-color: cyan;
}
</style>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<script type="text/javascript">
var drag_id, drag_parent_id, enter_id, enter_parent_id;
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
drag_id = ev.target.id;
drag_parent_id = ev.target.parentNode.id;
document.getElementById("status").innerHTML = "drag event -- dragged item: "+drag_id + " || drag container: " + drag_parent_id;
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.parentNode.appendChild(document.getElementById(data));
//if not droping on original container && itself
if (ev.target.id != drag_parent_id && ev.target.id != drag_id) {
document.getElementById("status3").innerHTML = "drop event -- drop container: "+ev.target.parentNode.id + " || drop target: " + ev.target.id + " || dropped item: " + data;
//drag container append orignal enter child
document.getElementById(drag_parent_id).appendChild(document.getElementById(enter_id));
//remove original child from enter container
document.getElementById(enter_parent_id).removeChild(document.getElementById(enter_id));
}
}
function dragEnter(ev) {
//filter out drag enter on original container
if (event.target.id != drag_parent_id && event.target.id != drag_id) {
document.getElementById("status2").innerHTML = "drag enter event -- drop target: "+ event.target.id + " || drop target container: " + ev.target.parentNode.id;
enter_id = event.target.id;
enter_parent_id = ev.target.parentNode.id;
}
}
</script>
</head>
<br />
<div id="to-dos">
<div class="to-do-tab" id="div1" ondragenter="dragEnter(event)" ondragover="allowDrop(event)" ondrop="drop(event)">
<div class="to-do-item" draggable="true" id="drag1" ondragstart="drag(event)">
<i class="fa fa-hand-peace-o" style="font-size: 24px;"></i> to-do-1</div>
</div>
<div class="to-do-tab" id="div2" ondragenter="dragEnter(event)" ondragover="allowDrop(event)" ondrop="drop(event)">
<div class="to-do-item" draggable="true" id="drag2" ondragstart="drag(event)">
<i class="fa fa-cny" style="font-size: 24px;"></i> to-do-2</div>
</div>
<div class="to-do-tab" id="div3" ondragenter="dragEnter(event)" ondragover="allowDrop(event)" ondrop="drop(event)">
<div class="to-do-item" draggable="true" id="drag3" ondragstart="drag(event)">
<i class="fa fa-transgender-alt" style="font-size: 24px;"></i> to-do-3</div>
</div>
<div class="to-do-tab" id="div4" ondragenter="dragEnter(event)" ondragover="allowDrop(event)" ondrop="drop(event)">
<div class="to-do-item" draggable="true" id="drag4" ondragstart="drag(event)">
<i class="fa fa-superscript" style="font-size: 24px;"></i> to-do-4</div>
</div>
<div class="to-do-tab" id="div5" ondragenter="dragEnter(event)" ondragover="allowDrop(event)" ondrop="drop(event)">
<div class="to-do-item" draggable="true" id="drag5" ondragstart="drag(event)">
<i class="fa fa-refresh fa-spin" style="font-size: 24px;"></i> to-do-5</div>
</div>
<div class="to-do-tab" id="div6" ondragenter="dragEnter(event)" ondragover="allowDrop(event)" ondrop="drop(event)">
<div class="to-do-item" draggable="true" id="drag6" ondragstart="drag(event)">
<i class="fa fa-space-shuttle" style="font-size: 24px;"></i> to-do-6</div>
</div>
</div>
<div id="status">
</div>
<div id="status2">
</div>
<div id="status3">
</div>
reference:
https://shopify.github.io/draggable/
https://www.w3schools.com/html/html5_draganddrop.asp
https://www.w3schools.com/howto/howto_js_todolist.asp
https://jsfiddle.net/phusick/Rceua/
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_ondragenter
No comments:
Post a Comment