blocks|key|4183654|text|有一些演示可以滚动页面。尝试以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4183655|​|4183656|++<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>|code-block|syntax|javascript|4183657|++<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>|4183658|调整窗口大小。|4183659|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>There are some demo where page scrolling is possible. try this code: </p>

<p></p>

<p>
   </p>

<pre><code>  &lt;style type = "text/css"&gt;
     #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; }
  &lt;/style&gt;

  &lt;script type = "text/javascript"&gt;

     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;
     }
  &lt;/script&gt;
</code></pre>

<p>
   </p>

<pre><code>  &lt;center&gt;
     &lt;h2&gt;Drag and drop HTML5 demo&lt;/h2&gt;
     &lt;div&gt;Try to move the purple box into the pink box.&lt;/div&gt;

     &lt;div id = "boxA" draggable = "true"
        ondragstart = "return dragStart(ev)"&gt;
        &lt;p&gt;Drag Me&lt;/p&gt;
     &lt;/div&gt;

     &lt;div id = "boxB" ondragenter = "return dragEnter(ev)" 
        ondrop = "return dragDrop(ev)" 
        ondragover = "return dragOver(ev)"&gt;Dustbin
     &lt;/div&gt;
  &lt;/center&gt;
</code></pre>

<p>
</p>

<p>Resize the window. </p>


blocks|key|4183684|text|这是正常工作的代码。附件可以显示工作页面的屏幕截图。我修改了源代码，添加了一些div来使页面滚动。代码来源：https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4183685|<!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>|code-block|syntax|javascript|4183686|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop^0|1I|1Y|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>This is working code. Attachment can be shown of the screenshot of the working page. I changed the source code by adding some div to make the page scroll. 
Code source: <a href="https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop" rel="nofollow noreferrer">https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop</a></p>

<pre><code>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
#div1 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}

&lt;/style&gt;
&lt;script&gt;
    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));
    }
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;p&gt;Drag the W3Schools image into the rectangle:&lt;/p&gt;

    &lt;div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
    &lt;br&gt;

    &lt;img id="drag1" src="images.jpg" alt="image can not be seen"draggable="true"       ondragstart="drag(event)" width="300" height="68"&gt;
&lt;div id="middle" style="height:50px;width:1200px;background-color:blue;margin-top:300px;"&gt;&lt;p&gt;This is a test div&lt;/p&gt; &lt;/div&gt;
    &lt;div id="bottom" style="height:50px;width:1200px;background-color:yellow;margin-  top:400px;"&gt;&lt;p&gt;This is another test div&lt;/p&gt;&lt;/div&gt;


&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|4183726|text|这可能不是发生这种情况的唯一原因，但在我的例子中，有一个带有pointer-events:+none的overlay元素，它阻止了在Chrome中拖动时的滚动|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4183727|entityMap^0|U|K|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>It's probably not the only reason why this happens, but in my case there was an overlay element with <code>pointer-events: none</code> which prevented scrolling while dragging in Chrome</p>


<p>It seems that it is not possible to scroll the page using the mouse wheel when using html5 drag and drop feature. I have seen this problem occuring in any html5 drag and drop live demo. any workaround to solve that issue?</p>


Can't scroll page with mouse wheel while using html5 drag and drop

HTML5

在使用html5拖放功能时，似乎无法使用鼠标滚轮滚动页面。我在任何html5拖放现场演示中都看到过这个问题。有什么解决方法可以解决这个问题吗？

问使用html5拖放时无法使用鼠标滚轮滚动页面
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用html5拖放时无法使用鼠标滚轮滚动页面EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用html5拖放时无法使用鼠标滚轮滚动页面
EN