在運行時創建時移除元素時出錯
[英]Error moving aside element when created at runtime
問題描述
我試圖為我的一個游戲創建一個程序（細節不需要）然而我可以在代碼中移動一旁的代碼<aside draggable="true" class="dragme" data-item="0">One</aside>
但如果我在運行時創建它（通過按鈕單擊）它會在控制台中給出我的錯誤Uncaught TypeError: Cannot read property 'style' of undefined
這是我的完整代碼，任何人有想法？
<!DOCTYPE HTML> <html> <head> <style> aside { position: absolute; left: 0; top: 0; width: 200px; background: rgba(255, 255, 255, 1); border: 2px solid rgba(0, 0, 0, 1); border-radius: 4px; padding: 8px; } .second { left: 100px; top: 100px; } body, html { min-height: 100vh; } body{ width:700px; height:700px; } </style> </head> <body ondragover="drag_over(event)" ondrop="drop(event)"> <div class="ControlPanel"> <button onclick="CreateNew('item1')">Item1</button> </div> <aside draggable="true" class="dragme" data-item="0">One</aside> <script> var dataNum = 0; function CreateNew(item){ if(item == "item1"){ dataNum += 1; var asi = document.createElement("ASIDE"); asi.setAttribute("draggable",true); asi.setAttribute("class","dragme second"); asi.setAttribute("data-item",dataNum); asi.setAttribute("style","left: 347px; top: 82px;"); document.body.appendChild(asi); } } function drag_start(event) { var style = window.getComputedStyle(event.target, null); event.dataTransfer.setData("text/plain", (parseInt(style.getPropertyValue("left"), 10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"), 10) - event.clientY) + ',' + event.target.getAttribute('data-item')); } function drag_over(event) { event.preventDefault(); return false; } function drop(event) { var offset = event.dataTransfer.getData("text/plain").split(','); var dm = document.getElementsByClassName('dragme'); dm[parseInt(offset[2])].style.left = (event.clientX + parseInt(offset[0], 10)) + 'px'; dm[parseInt(offset[2])].style.top = (event.clientY + parseInt(offset[1], 10)) + 'px'; event.preventDefault(); return false; } var dm = document.getElementsByClassName('dragme'); for (var i = 0; i < dm.length; i++) { dm[i].addEventListener('dragstart', drag_start, false); document.body.addEventListener('dragover', drag_over, false); document.body.addEventListener('drop', drop, false); } </script> </body> </html>
1 個解決方案
解決方案1
0 已采納 2016-05-16 22:04:56
您只在頁面加載期間注冊一次事件偵聽器。 因此，在創建新元素時，還需要為新創建的元素重新注冊事件。
<script>
var dataNum = 0;
function CreateNew(item){
if(item == "item1"){
dataNum += 1;
var asi = document.createElement("ASIDE");
asi.setAttribute("draggable",true);
asi.setAttribute("class","dragme second");
asi.setAttribute("data-item",dataNum);
asi.setAttribute("style","left: 347px; top: 82px;");
document.body.appendChild(asi);
registerDragMe(); // --> Add this
}
}
function drag_start(event) {
var style = window.getComputedStyle(event.target, null);
event.dataTransfer.setData("text/plain", (parseInt(style.getPropertyValue("left"), 10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"), 10) - event.clientY) + ',' + event.target.getAttribute('data-item'));
}
function drag_over(event) {
event.preventDefault();
return false;
}
function drop(event) {
var offset = event.dataTransfer.getData("text/plain").split(',');
var dm = document.getElementsByClassName('dragme');
dm[parseInt(offset[2])].style.left = (event.clientX + parseInt(offset[0], 10)) + 'px';
dm[parseInt(offset[2])].style.top = (event.clientY + parseInt(offset[1], 10)) + 'px';
event.preventDefault();
return false;
}
// create a wrapper function
function registerDragMe(){
var dm = document.getElementsByClassName('dragme');
for (var i = 0; i < dm.length; i++) {
dm[i].addEventListener('dragstart', drag_start, false);
document.body.addEventListener('dragover', drag_over, false);
document.body.addEventListener('drop', drop, false);
}
}
registerDragMe();
</script>
工作示例： https ： //jsfiddle.net/jcLjr70y/
旁邊菜單示例中的錯誤
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.