Div перетаскивает событие только отправляет div влево?

Question

У меня есть код, взятый из w3schools, чтобы помочь моему приложению создать перетаскиваемый элемент div. Я пытаюсь получить div с контентом, чтобы пользователь мог его забрать и выбросить в любое удобное для него место (нет необходимости в dropzone, в том числе и по z-index). Когда я применяю код, это работает!

Кроме .... независимо от того, как вы перетаскиваете его, после того, как он поднят, он только перемещает весь элемент влево. Держите это в тайне, и 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>