Javascript 我的拖放功能不是'；不起作用。I'；我有打字错误。这是什么意思？_Javascript_Drag And Drop_Drag

Javascript 我的拖放功能不是'；不起作用。I'；我有打字错误。这是什么意思？

javascript

Javascript 我的拖放功能不是'；不起作用。I'；我有打字错误。这是什么意思？,javascript,drag-and-drop,drag,Javascript,Drag And Drop,Drag,我收到一个错误声明：未捕获的TypeError:无法读取null的属性“addEventListener” 我正在尝试用比萨饼图片做一个拖放游戏，我正在努力在HTML上的任何地方拖放任何东西。当我为我的addEventListener创建HTML时，我不明白为什么它是空的这是我目前掌握的代码： <html> <body> <div id="outerContainer"> <div id="container"> <

我收到一个错误声明：

未捕获的TypeError:无法读取null的属性“addEventListener”

我正在尝试用比萨饼图片做一个拖放游戏，我正在努力在HTML上的任何地方拖放任何东西。当我为我的

addEventListener

创建HTML时，我不明白为什么它是空的

这是我目前掌握的代码：

<html>
<body>
<div id="outerContainer">
    <div id="container">
        <div id="item">

        </div>
    </div>
</div>
</body>
</html

<script>

var dragItem = document.querySelector("#item");
var container = document.querySelector("#container");

var active = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;


container.addEventListener("mousedown", dragStart, false);
container.addEventListener("mouseup", dragEnd, false);
container.addEventListener("mousemove", drag, false);


您应该尝试将javascript代码放入函数中，并在onload事件中调用该函数。这是为了确保在执行javascript时加载DOM
<html>
<body onload="init()">
    <div id="outerContainer">
        <div id="container">
            <div id="item">
            </div>
        </div>
    </div>
</body>
</html>

<script>

function init() {
    var dragItem = document.querySelector("#item");
    var container = document.querySelector("#container");

    var active = false;
    var currentX;
    var currentY;
    var initialX;
    var initialY;
    var xOffset = 0;
    var yOffset = 0;

    container.addEventListener("mousedown", dragStart, false);
    container.addEventListener("mouseup", dragEnd, false);
    container.addEventListener("mousemove", drag, false);
}
</script>


函数init（）{
var dragItem=document.querySelector（“#项”）；
var container=document.querySelector（“容器”）；
var-active=false；
无功电流x；
无功电流；
var initialX；
初始变量；
var xOffset=0；
var yOffset=0；
container.addEventListener（“mousedown”，dragStart，false）；
container.addEventListener（“mouseup”，dragEnd，false）；
container.addEventListener（“mousemove”，拖动，false）；
}
在结束html标记上缺少一个