I’m working on a project where the user can drag and drop courses from “Required courses for track” list to “Required Courses” and vice-versa.
The same works with “Pre-requisite courses” and “Pre-requisite courses for track”
But those courses are also dragging into each other and creating a functionality that I do not want, how can I prevent the required courses from dragging into the pre-requisite section and the Pre-requisite courses to Requisite section?
I tried creating different Dividers for hosting
- Required courses and required courses for track
and - Pre-requisite courses and Pre-requisite courses for track
but that doesn’t seem to work
HTML:
`
<div>
<!--First Drop Target-->
<div data-drop-target="true">
<h4>Required courses</h4>
<div id="box1" draggable="true" class="white">Course1</div>
<div id="box2" draggable="true" class="white">Course2</div>
</div>
<!--Second Drop Target-->
<div data-drop-target="true">
<h4>Required courses for track</h4>
<div id="box3" draggable="true" class="white">Course3</div>
<div id="box4" draggable="true" class="white">Course4</div>
<div id="box5" draggable="true" class="white">Course5</div>
</div>
</div>
<div>
<!--First Drop Target-->
<div data-drop-target="true">
<h4>Required courses</h4>
<div id="box6" draggable="true" class="white">Course1</div>
<div id="box7" draggable="true" class="white">Course2</div>
</div>
<!--Second Drop Target-->
<div data-drop-target="true">
<h4>Required courses for track</h4>
<div id="box8" draggable="true" class="white">Course3</div>
<div id="box9" draggable="true" class="white">Course4</div>
<div id="box10" draggable="true" class="white">Course5</div>
</div>
</div>
`
CSS:
`
h4 {
color: #e87500;
margin-top: 0px;
}
[data-drop-target] {
height: 200px;
width: 500px;
margin: 25px;
background-color: lightgray;
float: left;
}
.drag-enter {
border: 2px dashed #000;
}
.box {
width: 100px;
height: 100px;
float: left;
}
.box:nth-child(3) {
clear: both;
}
.red {
background-color: firebrick;
border: 1px solid black;
}
.white {
background-color: white;
border: 1px solid black;
}
`
JS:
`
//Function handleDragStart(), Its purpose is to store the id of the draggable element.
function handleDragStart(e) {
e.dataTransfer.setData("text", this.id); //note: using "this" is the same as using: e.target.
}//end function
//The dragenter event fires when dragging an object over the target.
//The css class "drag-enter" is append to the targets object.
function handleDragEnterLeave(e) {
if(e.type == "dragenter") {
this.className = "drag-enter"
} else {
this.className = "" //Note: "this" referces to the target element where the "dragenter" event is firing from.
}
}//end function
//Function handles dragover event eg.. moving your source div over the target div element.
//If drop event occurs, the function retrieves the draggable element’s id from the DataTransfer object.
function handleOverDrop(e) {
e.preventDefault();
//Depending on the browser in use, not using the preventDefault() could cause any number of strange default behaviours to occur.
if (e.type != "drop") {
return; //Means function will exit if no "drop" event is fired.
}
//Stores dragged elements ID in var draggedId
var draggedId = e.dataTransfer.getData("text");
//Stores referrence to element being dragged in var draggedEl
var draggedEl = document.getElementById(draggedId);
//if the event "drop" is fired on the dragged elements original drop target e.i.. it's current parentNode,
//then set it's css class to ="" which will remove dotted lines around the drop target and exit the function.
if (draggedEl.parentNode == this) {
this.className = "";
return; //note: when a return is reached a function exits.
}
//Otherwise if the event "drop" is fired from a different target element, detach the dragged element node from it's
//current drop target (i.e current perantNode) and append it to the new target element. Also remove dotted css class.
draggedEl.parentNode.removeChild(draggedEl);
this.appendChild(draggedEl); //Note: "this" references to the current target div that is firing the "drop" event.
this.className = "";
}//end Function
//Retrieve two groups of elements, those that are draggable and those that are drop targets:
var draggable = document.querySelectorAll('[draggable]')
var targets = document.querySelectorAll('[data-drop-target]');
//Note: using the document.querySelectorAll() will aquire every element that is using the attribute defind in the (..)
//Register event listeners for the"dragstart" event on the draggable elements:
for(var i = 0; i < draggable.length; i++) {
draggable[i].addEventListener("dragstart", handleDragStart);
}
//Register event listeners for "dragover", "drop", "dragenter" & "dragleave" events on the drop target elements.
for(var i = 0; i < targets.length; i++) {
targets[i].addEventListener("dragover", handleOverDrop);
targets[i].addEventListener("drop", handleOverDrop);
targets[i].addEventListener("dragenter", handleDragEnterLeave);
targets[i].addEventListener("dragleave", handleDragEnterLeave);
}
`