Saat menyeret objek (hampir) ke luar jendela, bagaimana cara membuat jendela bergulir secara otomatis ke arah tersebut?

Saya menggunakan html5 untuk mengimplementasikan 'drag and drop' http://www.w3schools.com/html/html5_draganddrop.asp.

Tapi kotak droppable saya cukup banyak dan tidak bisa semuanya ditampilkan di area yang ditampilkan di jendela. Oleh karena itu, ketika saya menyeret elemen ke (mis.) kotak droppable bawah jendela yang berada di luar jangkauan yang ditampilkan, bagaimana cara membuat jendela bergulir secara otomatis?

Seperti halaman web berikut, di mana saya ingin menyeret gambar dan melepaskannya ke persegi panjang paling bawah (yang kelima), yang berada di luar jangkauan area yang ditampilkan. Ketika saya menyeret gambar ke akhir jendela, bagaimana cara membuat jendela bergulir secara otomatis hingga ke bawah?

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

(Anda dapat menyalin kode di atas ke kolom kiri http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop, dan periksa hasilnya di sebelah kanan. Saya ingin menunjukkannya di jsfiddle, tetapi tidak tahu mengapa kode tidak berfungsi di sana)

Saya perhatikan Chrome dapat melakukan ini secara otomatis, tetapi tidak untuk browser lain seperti safari.

Saya juga menemukan solusi terkait seperti 'fungsi gulir' atau 'mendeteksi mouse di luar jendela'. Tapi saya tidak bisa mendapatkan apa yang saya inginkan berdasarkan kode mereka. Sangat menghargai jika seseorang dapat memberikan versi solusi yang lebih detail/lengkap.


javascript scroll drag-and-drop jquery
person Elizabeth    schedule 29.09.2012    source sumber

Jawaban (1)


arrow_upward
1
arrow_downward

Apa yang baru saya temukan adalah (setidaknya di Chrome) ketika peristiwa drag terjadi, semua peristiwa "mousemove" ditangguhkan, kemudian dijalankan bersamaan setelah penurunan (atau pembatalan) terjadi. Itu mematikan satu ide, tapi masih ada beberapa ide lainnya. Ini dia: tambahkan div yang benar-benar diposisikan dengan tinggi 40-50 px ke bagian bawah viewport (jadi lengket), dan kemudian buat acara dragenter untuk mendeteksi posisi mouse itu dan gulir jendela (dan satu di bagian atas kursus):

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