5

我使用 html5 来实现“拖放” http://www.w3schools.com/html/html5_draganddrop.asp。

但是我的droppable box比较多，不能全部显示在窗口的显示区域。因此，当我将一个元素拖到超出显示范围的窗口的（例如）底部可放置框时，如何使窗口自动滚动？

像下面的网页一样，我想将图像拖放到底部矩形（第五个），它超出了显示区域的范围。当我将图像拖到窗口末尾时，如何使窗口自动滚动到底部？

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

（您可以将上面的代码复制到左列http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop，并在右侧检查结果。我想在 jsfiddle 中显示，但不知道为什么代码在那里不起作用）

我注意到 Chrome 可以自动执行此操作，但不适用于 safari 等其他浏览器。

我还找到了相关的解决方案，例如“滚动功能”或“检测鼠标超出窗口”。但我只是无法根据他们的代码得到我想要的东西。如果有人可以提供更详细/完整的解决方案版本，我们将不胜感激。

4

1 回答 1

1

我刚刚发现的是（至少在 Chrome 中）当拖动事件发生时，所有“mousemove”事件都被推迟，然后在放置（或取消）发生后一起触发。这扼杀了一个想法，但还有其他几个想法。这是一个：在视口底部添加一个高度为 40-50 px 的绝对定位的 div（所以它是粘性的），然后有一个 dragenter 事件来检测鼠标位置并滚动窗口（以及一个在顶部课程）：

<!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>
于 2013-01-08T00:50:36.750 回答