All geek questions in one place

When dragging an external (external) window window, how do I scroll the window automatically in this direction?

I use html5 to implement 'drag and drop' http://www.w3schools.com/html/html5_draganddrop.asp .

But my drop-down boxes are quite a lot and cannot be displayed in the displayed area of ​​the window. Therefore, when I drag an item to (for example.) The bottom drop-down box of a window that is out of the displayed range, how do I automatically scroll the window?

Like the following webpage, where I want to drag and drop the image and drop it onto the bottom rectangle (fifth), which goes beyond the displayed area. When I drag the image to the end of the window, how do I automatically scroll the window to the end?

<!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1,#div2,#div3,#div4,#div5 { width:350px; height:200px; 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.innerHTML += data+"droppedHere"+"<br/>"; } </script> </head> <body> <p>Drag the W3Schools image into the rectangle:</p> <img id="drag1" src="http://www.w3schools.com/html/img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" /> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> </body> </html>

(You can copy the code above into the left column http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop and check the result on the right. I want to show that in jsfiddle, but I don’t know why the code does not work there )

I noticed that Chrome can do this automatically, but not for other browsers like safari.

I also found related solutions, such as "scroll functions" or "mouse detection from a window." But I just can't get what I want based on their codes. Appreciate this if someone can provide a more detailed / full version of the solution.

+4
source share
1 answer

What I just discovered is that (at least in Chrome), when a drag event occurs, all the "mousemove" events are delayed, then all are fired together after the drop (or cancellation) occurs. It kills one idea, but there are a couple of others. Here's one: add an absolutely positioned div with a height of 40-50 px to the bottom of the viewport (so it's sticky), and then get a dragenter event to detect that mouse position and scroll the window (and one at the top of the course):

 <!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1,#div2,#div3,#div4,#div5 { width:350px; height:200px; padding:10px; border:1px solid #aaaaaa; } #scrollBottomDetect { position: fixed; bottom: 0; height: 40px; width: 100%; border: 1px solid red; } #scrollTopDetect { position: fixed; top: 0; height: 40px; width: 100%; border: 1px solid red; } </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.innerHTML += data+"droppedHere"+"<br/>"; } function scrollPage(diff) { window.scrollTo(window.scrollX, (window.scrollY + diff)); } </script> </head> <body> <div id="scrollTopDetect" ondragover="scrollPage(-10)"></div> <p>Drag the W3Schools image into the rectangle:</p> <img id="drag1" src="http://www.w3schools.com/html/img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" /> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <div id="scrollBottomDetect" ondragover="scrollPage(10)"></div> </body> </html>
+1
source

Source: https://habr.com/ru/post/1436955/

More articles:


All Articles