无法在屏幕上的任何位置进行拖放
无法在屏幕上的任何位置进行拖放
提问于 2015-07-03 13:43:14
我正在尝试添加拖放功能。我从这个链接中引用了这个链接- Drag-drop fiddle.I保持了所有的javascript不变，只是把id改成了我的css.But，现在它不工作了，如果我把名字放在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>
回答 1
Stack Overflow用户
发布于 2015-07-03 13:51:38
您在html中使用了id=divTile，但在css(.divTile)中将其用作class。只需将您的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/“
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31199313
复制相关文章
相似问题
腾讯云开发者
