Fehler beiseite Element zu bewegen, wenn zur Laufzeit

Im erstellt versuchen, ein Programm für eine meiner Spiele zu erstellen (Details nicht erforderlich) dennoch kann ich um beiseite Elemente bewegen sich in den Code geschrieben <aside draggable="true" class="dragme" data-item="0">One</aside>Fehler beiseite Element zu bewegen, wenn zur Laufzeit

aber wenn ich schaffe es an Laufzeit (per Knopfklick) gibt es mir diesen Fehler in der Konsole Uncaught TypeError: Cannot read property 'style' of undefined

Hier ist mein voller Code jemand Ideen haben?

<!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 { 
 
\t left: 100px; 
 
\t top: 100px; 
 
} 
 

 
body, html { 
 
\t min-height: 100vh; 
 
} 
 

 
body{ 
 
\t width:700px; 
 
\t 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){ 
 
\t if(item == "item1"){ 
 
\t \t dataNum += 1; 
 
\t \t var asi = document.createElement("ASIDE"); 
 
\t \t asi.setAttribute("draggable",true); 
 
\t \t asi.setAttribute("class","dragme second"); 
 
\t \t asi.setAttribute("data-item",dataNum); 
 
\t \t asi.setAttribute("style","left: 347px; top: 82px;"); 
 
\t \t document.body.appendChild(asi); 
 
\t } 
 
} 
 

 
function drag_start(event) { 
 
\t var style = window.getComputedStyle(event.target, null); 
 
\t 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) { 
 
\t event.preventDefault(); 
 
\t return false; 
 
} 
 

 
function drop(event) { 
 
\t var offset = event.dataTransfer.getData("text/plain").split(','); 
 
\t var dm = document.getElementsByClassName('dragme'); 
 
\t dm[parseInt(offset[2])].style.left = (event.clientX + parseInt(offset[0], 10)) + 'px'; 
 
\t dm[parseInt(offset[2])].style.top = (event.clientY + parseInt(offset[1], 10)) + 'px'; 
 
\t event.preventDefault(); 
 
\t return false; 
 
} 
 

 
var dm = document.getElementsByClassName('dragme'); 
 
for (var i = 0; i < dm.length; i++) { 
 
\t dm[i].addEventListener('dragstart', drag_start, false); 
 
\t document.body.addEventListener('dragover', drag_over, false); 
 
\t document.body.addEventListener('drop', drop, false); 
 
} 
 
</script> 
 
</body> 
 
</html>

Quelle

2016-05-16 Anonymous

Sie registrieren die nur einmal Ereignis-Listener während der Seite zu laden. Wenn Sie ein neues Element erstellen, müssen Sie daher auch die Ereignisse für die neu erstellten Elemente erneut registrieren.

<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>

Arbeitsbeispiel: https://jsfiddle.net/jcLjr70y/

Quelle

2016-05-16 22:04:56 DinoMyte

Fehler beiseite Element zu bewegen, wenn zur Laufzeit

Antwort

Verwandte Themen