0
<!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>
私はこの機能をPHPスクリプトで使用するために作成しました。そのため、私の学校のウェブサイトからアナウンスを受け取り、そのページにコンテンツを自動的に作成することができました。ただし、実行すると、コードはまったく実行されません。 scriptタグが 'announcements' divでパレットになったら、コードはコンテンツを実行して作成します。JavaScriptでこの要素を作成できないのはなぜですか？
<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>
、ここに投稿する前に、JavaScriptコンソールでエラーをチェック。あなた自身でいくつかの基本的なデバッグを行う必要があります。 – Barmar