使用 html5 拖放時無法使用鼠標滾輪滾動頁面

Question

使用 html5 拖放功能時，似乎無法使用鼠標滾輪滾動頁面。 我在任何 html5 拖放現場演示中都看到過這個問題。 任何解決方法來解決這個問題？

Answer 1

這可能不是發生這種情況的唯一原因，但在我的情況下，有一個帶有pointer-events: none的覆蓋元素pointer-events: none阻止在 Chrome 中拖動時滾動

Answer 2

有一些演示可以實現頁面滾動。 試試這個代碼：

  <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>

調整窗口大小。

Answer 3

這是工作代碼。 附件可以顯示工作頁面的截圖。 我通過添加一些 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>

使用 html5 拖放時無法使用鼠標滾輪滾動頁面

問題描述

3 個解決方案

解決方案1
0 2021-05-11 00:26:01

解決方案2
-1 2018-06-16 12:30:45

解決方案3
-2 2018-06-18 23:48:00

使用 html5 拖放時無法使用鼠標滾輪滾動頁面

問題描述

3 個解決方案

解決方案1 0 2021-05-11 00:26:01

解決方案2 -1 2018-06-16 12:30:45

解決方案3 -2 2018-06-18 23:48:00

解決方案1
0 2021-05-11 00:26:01

解決方案2
-1 2018-06-16 12:30:45

解決方案3
-2 2018-06-18 23:48:00