Javascript 无法在屏幕上的任何位置拖放

我正在尝试添加拖放功能。我引用了此链接-。我保留了所有javascript，只是将id更改为“我的搁置”并更改css。但是现在如果我将名称保留在css中，它将不起作用，但更改为其他类它将不起作用

css

javascript

 <script>
       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));
}
function drag_over(event) {
    event.preventDefault();
    return false;
}
function drop(event) {
    var offset = event.dataTransfer.getData("text/plain").split(',');
    var dm = document.getElementById('divTile');
    dm.style.left = (event.clientX + parseInt(offset[0], 10)) + 'px';
    dm.style.top = (event.clientY + parseInt(offset[1], 10)) + 'px';
    event.preventDefault();
    return false;
}
var dm = document.getElementById('divTile');
dm.addEventListener('dragstart', drag_start, false);
document.body.addEventListener('dragover', drag_over, false);
document.body.addEventListener('drop', drop, false);
</script>

html

您在html中使用了id=divTile，但在css.divTile中将其用作类。只需将css更改为：

#divTile { //Use #divTile instead of .divTile
    position:  absolute;
    left: 0;
    top: 0; /* set these so Chrome doesn't return 'auto' from getComputedStyle */
}

---

这是更新的提琴：

感谢它现在可以工作了，但是如果我从css中删除position:absolute，它就会停止工作，我不想使用absolute position，因为我的div样式在position设置为absolute时不会显示。如果您的容器位置是相对的，您可以使用absolute position，或者你可以使用“位置固定”。请检查我的图像我想对图像中显示的所有div应用拖放功能如何将此设置位置设置为绝对或固定干扰我的设计请为其创建一个小提琴，以便我可以检查和更改。此外，这成为一个全新的问题，因此，我建议您创建一个新问题，创建适当的小提琴，并提供相关代码。

aside draggable="true" id="divTile">
<div class="col-sm-3">
    <section class="panel panel-default ">
        <div class="panel">
            <span class="thumb pull-left m-t m-l">
                <img src="~/Content/images/lef-nav/Pathology.png" class="b-a b-3x b-white">
            </span>
            <div class="clear m-t">
                <a href="@Url.Action("Pathology", "HealthRecord")" class="text-info text-lg">Pathology</a>
            </div>
        </div>
    </section>
</div>
</aside>

#divTile { //Use #divTile instead of .divTile
    position:  absolute;
    left: 0;
    top: 0; /* set these so Chrome doesn't return 'auto' from getComputedStyle */
}