5

私はhtml5を使用して「ドラッグアンドドロップ」http://www.w3schools.com/html/html5_draganddrop.aspを実装しています。

しかし、私のドロップ可能なボックスはかなりの数であり、すべてがウィンドウの表示領域に表示されるわけではありません。したがって、表示範囲外にあるウィンドウの (例) 一番下のドロップ可能ボックスに要素をドラッグすると、ウィンドウが自動的にスクロールするようにするにはどうすればよいですか?

次のWebページのように、画像をドラッグして、表示領域の範囲外にある一番下の長方形（5番目のもの）にドロップします。画像をウィンドウの最後までドラッグすると、ウィンドウが一番下まで自動的にスクロールするようにするにはどうすればよいですか?

<!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」イベントが延期され、ドロップ（またはキャンセル）が発生した後にすべて一緒に発生することです。これで 1 つのアイデアが失われますが、他にもいくつかあります。1 つ: ビューポートの下部に 40 ～ 50 ピクセルの高さの絶対配置 div を追加し (スティッキーになるように)、そのマウスの位置を検出してウィンドウをスクロールするための dragenter イベントを設定します (およびウィンドウの上部に 1 つ)。コース）：

<!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 に答える