使用html5拖放时无法使用鼠标滚轮滚动页面
使用html5拖放时无法使用鼠标滚轮滚动页面
提问于 2018-06-14 21:40:29
在使用html5拖放功能时，似乎无法使用鼠标滚轮滚动页面。我在任何html5拖放现场演示中都看到过这个问题。有什么解决方法可以解决这个问题吗？
回答 3
Stack Overflow用户
发布于 2021-05-11 08:26:02
这可能不是发生这种情况的唯一原因，但在我的例子中，有一个带有pointer-events: none的overlay元素，它阻止了在Chrome中拖动时的滚动
Stack Overflow用户
发布于 2018-06-16 20:30:46
有一些演示可以滚动页面。尝试以下代码：
<style type = "text/css">
#boxA, #boxB {
float:left;padding:10px;margin:10px;-moz-user-select:none;
}
#boxA { background-color: #6633FF; width:75px; height:75px; }
#boxB { background-color: #FF6699; width:150px; height:150px; }
</style>
<script type = "text/javascript">
function dragStart(ev) {
ev.dataTransfer.effectAllowed = 'move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
function dragEnter(ev) {
event.preventDefault();
return true;
}
function dragOver(ev) {
return false;
}
function dragDrop(ev) {
var src = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(src));
ev.stopPropagation();
return false;
}
</script> <center>
<h2>Drag and drop HTML5 demo</h2>
<div>Try to move the purple box into the pink box.</div>
<div id = "boxA" draggable = "true"
ondragstart = "return dragStart(ev)">
<p>Drag Me</p>
</div>
<div id = "boxB" ondragenter = "return dragEnter(ev)"
ondrop = "return dragDrop(ev)"
ondragover = "return dragOver(ev)">Dustbin
</div>
</center>调整窗口大小。
Stack Overflow用户
发布于 2018-06-19 07:48:01
这是正常工作的代码。附件可以显示工作页面的屏幕截图。我修改了源代码，添加了一些div来使页面滚动。代码来源：https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag the W3Schools image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="images.jpg" alt="image can not be seen"draggable="true" ondragstart="drag(event)" width="300" height="68">
<div id="middle" style="height:50px;width:1200px;background-color:blue;margin-top:300px;"><p>This is a test div</p> </div>
<div id="bottom" style="height:50px;width:1200px;background-color:yellow;margin- top:400px;"><p>This is another test div</p></div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50858919
复制相关文章
相似问题