拖放不將樣式附加到div
[英]Drag and drop not appending styling to div
問題描述
我正在嘗試拖放div，但是樣式並沒有隨之而來。 我究竟做錯了什么？
<script>
function _(id) {
return document.getElementById(id);
}
function allowDrop(ev) {
ev.preventDefault();
}
function drag_start(ev) {
ev.dataTransfer.setData("elem_id", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("elem_id");//returns external card id
//var which_div = ev.target.id;//ev.target.id; //eg div2
console.log("div: " + ev.target.id + " object dropping: " + ev.dataTransfer.getData("elem_id"))
for (var i = 0; i < ev.target.children.length; i++) {
console.log(ev.target.children[i].id + " is in the drop zone");
}
//ev.target.appendChild(_(ev.dataTransfer.getData("elem_id"))); //Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
ev.target.append(_(ev.dataTransfer.getData("elem_id"))); //appends [Object] not the styling
}
</script>
僅注意[對象對象]，而不是正確的卡樣式（在右側）
1 個解決方案
解決方案1
0 2018-04-27 20:28:31
您的代碼顯然沒有錯。 以下腳本可在Firefox和Chrome瀏覽器以及代碼段運行器中使用。 那是您的中間代碼。
<!DOCTYPE HTML> <html> <head> <style> .draggable { width: 140px; height: 140px; background: palevioletred; border-radius: 10px; } .draggable.is-dragging { opacity: 0.7; } #div1 { width: 200px; height: 200px; padding: 10px; border: 1px solid #aaaaaa; } </style> <script> function _(id) { return document.getElementById(id); } function allowDrop(ev) { ev.preventDefault(); } function drag_start(ev) { ev.dataTransfer.setData("elem_id", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("elem_id");//returns external card id //var which_div = ev.target.id;//ev.target.id; //eg div2 console.log("div: " + ev.target.id + " object dropping: " + ev.dataTransfer.getData("elem_id")) for (var i = 0; i < ev.target.children.length; i++) { console.log(ev.target.children[i].id + " is in the drop zone"); } //ev.target.appendChild(_(ev.dataTransfer.getData("elem_id"))); //Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. ev.target.append(_(ev.dataTransfer.getData("elem_id"))); //appends [Object] not the styling } </script> </head> <body> <p>Drag the image into the rectangle:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="mypurplerect" class="draggable" draggable="true" ondragstart="drag_start(event)"></div> </body> </html>
還有其他事情嗎？
JavaScript拖放div樣式
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.