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

Question

我正在尝试添加拖放功能。我已经从这个链接中获取了参考 - Drag-drop fiddle。我保留了所有的javascript，只是将id更改为我的旁边并且只是更改了css.But now now如果我把它的名字放在css旁边它不起作用，那就不起作用了，但是对其他课程来说它没有用。

CSS

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

的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

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>

Answer 1

您在html中使用了id=divTile，但在class中将其用作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 */
}

这是更新的小提琴：“http://jsfiddle.net/kKuqH/2148/”