При перетаскивании объекта (почти) за пределы окна, как заставить окно автоматически прокручиваться в этом направлении?

Я использую html5 для реализации «перетаскивания» http://www.w3schools.com/html/html5_draganddrop.asp.

Но моих выпадающих ящиков довольно много, и не все они могут отображаться в отображаемой области окна. Поэтому, когда я перетаскиваю элемент в (например) нижнее раскрывающееся поле окна, которое находится вне отображаемого диапазона, как сделать так, чтобы окно прокручивалось автоматически?

Как и следующая веб-страница, где я хочу перетащить изображение и поместить его в нижний прямоугольник (пятый), который находится за пределами отображаемой области. Когда я перетаскиваю изображение в конец окна, как сделать так, чтобы окно прокручивалось автоматически до самого низа?

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

Я также нашел связанные решения, такие как «функции прокрутки» или «обнаружение мыши вне окна». Но я просто не могу получить то, что хочу, основываясь на их кодах. Очень признателен, если кто-то может предоставить более подробную/полную версию решения.


javascript scroll drag-and-drop jquery
person Elizabeth    schedule 29.09.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я только что обнаружил, что (по крайней мере, в Chrome), когда происходит событие перетаскивания, все события «mousemove» откладываются, а затем срабатывают все вместе после того, как происходит падение (или отмена). Это убивает одну идею, но есть пара других. Вот один из них: добавьте абсолютно позиционированный div высотой 40-50 пикселей в нижнюю часть окна просмотра (чтобы он был липким), а затем создайте событие 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>
person Jordan Kasper    schedule 08.01.2013