I am attempting to create a function that will allow me to drag a draggable element and drop it into a designated container using their IDs. However, I am unsure of how to get started.
dropToContainer("myDraggable", "div3");
function dropToContainer(contentID, containerID)
{
//move draggable Element with contentID to the container with containerID
}
/* ----- DRAG & DROP FUNCTIONS ----------- */
function allowDropStatus(ev) {
ev.preventDefault();
return false;
}
function dragInitialize(ev) {
ev.dataTransfer.effectAllowed='move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
return true;
}
function dropComplete(ev) {
ev.preventDefault();
var src = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(src));
ev.stopPropagation();
return false;
}#div1, #div2, #div3
{
float:left;
width:280px;
height:180px;
margin:10px;
padding:10px;
border:1px solid #aaaaaa;
}<div id="div1" ondrop="return dropComplete(event)" ondragover="return allowDropStatus(event)">
<img id="myDraggable" src="https://www.webcodegeeks.com/wp-content/uploads/2015/12/WebCodeGeeks-logo.png" draggable="true" ondragstart="return dragInitialize(event)" width="250" height="150" id="drag1">
</div>
<div id="div2" ondrop="return dropComplete(event)" ondragover="return allowDropStatus(event)"></div>
<div id="div3" ondrop="return dropComplete(event)" ondragover="return allowDropStatus(event)"></div>Would it be possible to achieve this functionality?
JSFIDDLE
https://jsfiddle.net/08u9zmau/ (Does not seem to work in JSFIDDLE)