<!DOCTYPE html>
<html>
<head><style>
body, html{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
position: relative;
}
.drag_box{
width: 40%;
height: 90%;
border: black 1px solid;
background-color: lightgray;
margin-top: 20px;
}
.drag_box h2{
text-align: center;
}
.content{
width: 80%;
overflow: auto;
border: solid 2px black;
background-color: burlywood;
}
</style>
</head>
<body>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
if(document.getElementById(ev.target.id).id.includes("content")){
return;
}
else{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
}
</script>
I created this function to use in a php script so it could take announcements from my school's website and automatically create content on the page. However, when run, the code does not execute at all. When the script tags are palced in the 'announcements' div, the code will execute and create the content.
<script>
function addContent(id, headline, content){
var announcementContent = document.createElement('div');
announcementContent.setAttribute('class', 'content');
announcementContent.setAttribute('id', 'content'+id);
announcementContent.setAttribute('draggable', 'true');
announcementContent.setAttribute('ondragstart', 'drag(event)');
announcementContent.innerHTML = '<h3>'+ headline +'</h3><p>'+ content +'</p>';
document.getElementById('announcements').appendChild(announcementContent);
}
addContent('3','test','testest');
</script>
<div id="announcements" class="drag_box" style="float:left; margin-left: 9%;" ondrop="drop(event)" ondragover="allowDrop(event)">
<h2>Announcements</h2>
</div>
<div id="delete_column" class="drag_box" style="float:right; margin-right: 9%;" ondrop="drop(event)" ondragover="allowDrop(event)">
<h2>Trash Box</h2>
</div>
</body>
</html>
