Javascript 在运行时创建时将元素移到一边时出错

我正在尝试为我的一个游戏创建一个程序（不需要细节），但是我可以将代码中的元素放到一边

One

但是如果我在运行时创建它（通过点击按钮），它会在控制台中给我这个错误

未捕获类型错误：无法读取未定义的属性“style”

这是我的全部代码有人有想法吗

旁白{
位置：绝对位置；
左：0；
排名：0；
宽度：200px；
背景：rgba（255，255，255，1）；
边框：2倍实心rgba（0,0,0,1）；
边界半径：4px；
填充：8px；
}
.第二{
左：100px；
顶部：100px；
}
正文，html{
最小高度：100vh；
}
身体{
宽度：700px；
高度：700px；
}
项目1
一个
var-dataNum=0；
函数CreateNew（项）{
如果（项目==“项目1”）{
dataNum+=1；
var asi=document.createElement（“旁白”）；
asi.setAttribute（“可拖动”，真）；
asi.setAttribute（“类”、“拖拉秒”）；
asi.setAttribute（“数据项”，dataNum）；
asi.setAttribute（“样式”，“左：347px；顶：82px；”）；
文件.正文.附件（asi）；
}
}
函数拖放启动（事件）{
var style=window.getComputedStyle（event.target，null）；
event.dataTransfer.setData（“text/plain”），（parseInt（style.getPropertyValue（“左”），10）-event.clientX）+’，“+（parseInt（style.getPropertyValue（“上”），10）-event.clientY）+’，“+event.target.getAttribute（“数据项”）；
}
函数拖放（事件）{
event.preventDefault（）；
返回false；
}
函数删除（事件）{
var offset=event.dataTransfer.getData（“text/plain”）.split（'，'）；
var dm=document.getElementsByClassName（'dragme'）；
dm[parseInt（偏移量[2]）].style.left=（event.clientX+parseInt（偏移量[0]，10]）+'px'；
dm[parseInt（offset[2]）].style.top=（event.clientY+parseInt（offset[1]，10））+'px'；
event.preventDefault（）；
返回false；
}
var dm=document.getElementsByClassName（'dragme'）；
对于（变量i=0；i

在页面加载期间，您只注册了一次事件侦听器。因此，在创建新元素时，还需要为新创建的元素重新注册事件

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

var-dataNum=0；
函数CreateNew（项）{
如果（项目==“项目1”）{
dataNum+=1；
var asi=document.createElement（“旁白”）；
asi.setAttribute（“可拖动”，真）；
asi.setAttribute（“类”、“拖拉秒”）；
asi.setAttribute（“数据项”，dataNum）；
asi.setAttribute（“样式”，“左：347px；顶：82px；”）；
文件.正文.附件（asi）；
registerFragme（）；//-->添加此
}
}
函数拖放启动（事件）{
var style=window.getComputedStyle（event.target，null）；
event.dataTransfer.setData（“text/plain”），（parseInt（style.getPropertyValue（“左”），10）-event.clientX）+’，“+（parseInt（style.getPropertyValue（“上”），10）-event.clientY）+’，“+event.target.getAttribute（“数据项”）；
}
函数拖放（事件）{
event.preventDefault（）；
返回false；
}
函数删除（事件）{
var offset=event.dataTransfer.getData（“text/plain”）.split（'，'）；
var dm=document.getElementsByClassName（'dragme'）；
dm[parseInt（偏移量[2]）].style.left=（event.clientX+parseInt（偏移量[0]，10]）+'px'；
dm[parseInt（offset[2]）].style.top=（event.clientY+parseInt（offset[1]，10））+'px'；
event.preventDefault（）；
返回false；
}
//创建一个包装函数
函数寄存器碎片（）{
var dm=document.getElementsByClassName（'dragme'）；
对于（变量i=0；i

---

工作示例：

在页面加载期间，您只注册了一次事件侦听器。因此，在创建新元素时，还需要为新创建的元素重新注册事件

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

var-dataNum=0；
函数CreateNew（项）{
如果（项目==“项目1”）{
dataNum+=1；
var asi=document.createElement（“旁白”）；
asi.setAttribute（“可拖动”，真）；
asi.setAttribute（“类”、“拖拉秒”）；
asi.setAttribute（“数据项”，dataNum）；
asi.setAttribute（“样式”，“左：347px；顶：82px；”）；
文件.正文.附件（asi）；
registerFragme（）；//-->添加此
}
}
函数拖放启动（事件）{
var style=window.getComputedStyle（event.target，null）；
event.dataTransfer.setData（“text/plain”），（parseInt（style.getPropertyValue（“左”），10）-event.clientX）+’，“+（parseInt（style.getPropertyValue（“上”），10）-event.clientY）+’，“+event.target.getAttribute（“数据项”）；
}
函数拖放（事件）{
event.preventDefault（）；
返回false；
}
函数删除（事件）{
var offset=event.dataTransfer.getData（“text/plain”）.split（'，'）；
var dm=document.getElementsByClassName（'dragme'）；
dm[parseInt（偏移量[2]）].style.left=（event.clientX+parseInt（偏移量[0]，10]）+'px'；
dm[parseInt（offset[2]）].style.top=（event.clientY+parseInt（offset[1]，10））+'px'；
event.preventDefault（）；
返回false；
}
//创建一个包装函数
函数寄存器碎片（）{
var dm=document.getElementsByClassName（'dragme'）；
对于（变量i=0；i

工作示例：