Question

我试图为我的一个游戏创建一个程序（不需要详细信息）然而我可以在代码中编写的元素旁边移动 Baz

但是如果我在运行时创建它（通过按钮单击），它会在控制台中给出这个错误 <aside draggable="true" class="dragme" data-item="0">One</aside>

这是我的完整代码，任何人都有想法？

＆＃13;

Uncaught TypeError: Cannot read property 'style' of undefined

＆＃13;

Answer 1

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

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

在运行时创建时移除元素时出错

1 个答案: