Div拖动事件仅将div发送到左侧吗？

Question

我从w3schools获得了代码来帮助我的应用程序创建可拖动的div。我正在尝试使div的内容能够被用户拾取并拖放到他们想要的任何位置（也不需要基于z索引的dropzone）。当我应用代码时，它可以工作！

除了...。无论您如何拖动它，一旦将其拾取，它只会将整个div向左移动。保持按住状态，div离开屏幕。 如果我将代码完全复制并粘贴到我的文件中，它们的工作将按预期进行。我想念什么？ （他们的div正确移动。如果我将其更改为我的，不）

链接https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_draggable

想法？

<style>
#MovingDiv {
    position: absolute;
    z-index: 9;
    background-color: #f1f1f1;
    text-align: center;
    border: 1px solid #d3d3d3;
}

#MovingDivHeader {
    padding: 10px;
    cursor: move;
    z-index: 10;
    background-color: #21c022;
    color: #fff;
}
 </style>
<script>
    //Make the DIV element draggagle:
    dragElement(document.getElementById("MovingDiv"));

    function dragElement(elmnt) {
        var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
        if (document.getElementById(elmnt.id + "Header")) {
            /* if present, the header is where you move the DIV from:*/
            document.getElementById(elmnt.id + "Header").onmousedown = dragMouseDown;
        } else {
            /* otherwise, move the DIV from anywhere inside the DIV:*/
            elmnt.onmousedown = dragMouseDown;
        }

        function dragMouseDown(e) {
            e = e || window.event;
            e.preventDefault();
            // get the mouse cursor position at startup:
            pos3 = e.clientX;
            pos4 = e.clientY;
            document.onmouseup = closeDragElement;
            // call a function whenever the cursor moves:
            document.onmousemove = elementDrag;
        }

        function elementDrag(e) {
            e = e || window.event;
            e.preventDefault();
            // calculate the new cursor position:
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            // set the element's new position:
            elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
            elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
        }

        function closeDragElement() {
            /* stop moving when mouse button is released:*/
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }
</script>

实际的div：

<div class="row" id="MovingDiv">
    <div id="MovingDivHeader">Move Me</div>
         <!-- Content -->
    </div>

    <div class="row">

    <!-- Content -->
    </div>

    }
    <p>
        @Html.ActionLink("value", "action")

    </p>

</div>