เมื่อลากวัตถุ (เกือบ) ออกไปนอกหน้าต่าง จะทำให้หน้าต่างเลื่อนไปทางนั้นโดยอัตโนมัติได้อย่างไร?

ฉันใช้ 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 สามารถทำได้โดยอัตโนมัติ แต่ไม่ใช่สำหรับเบราว์เซอร์อื่นๆ เช่น ซาฟารี

ฉันยังพบวิธีแก้ปัญหาที่เกี่ยวข้อง เช่น 'ฟังก์ชันการเลื่อน' หรือ 'การตรวจจับเมาส์นอกหน้าต่าง' แต่ฉันไม่สามารถได้รับสิ่งที่ต้องการตามรหัสของพวกเขา ขอขอบคุณเป็นอย่างสูงหากมีคนสามารถให้โซลูชันเวอร์ชันที่ละเอียด/สมบูรณ์ยิ่งขึ้นได้


javascript scroll drag-and-drop jquery
person Elizabeth    schedule 29.09.2012    source แหล่งที่มา

คำตอบ (1)


arrow_upward
1
arrow_downward

สิ่งที่ฉันเพิ่งค้นพบคือ (อย่างน้อยใน Chrome) ในขณะที่เหตุการณ์ลากเกิดขึ้น เหตุการณ์ "mousemove" ทั้งหมดจะถูกเลื่อนออกไป จากนั้นจึงเริ่มทำงานทั้งหมดพร้อมกันหลังจากการดรอป (หรือยกเลิก) เกิดขึ้น นั่นฆ่าความคิดหนึ่ง แต่มีอีกสองสามอย่าง นี่คือสิ่งหนึ่ง: เพิ่ม div ที่อยู่ในตำแหน่งที่แน่นอนด้วยความสูง 40-50 px ที่ด้านล่างของวิวพอร์ต (ดังนั้นจึงเหนียว) จากนั้นมีเหตุการณ์ 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