เหตุการณ์ดร็อปไม่เริ่มทำงานใน Chrome

ดูเหมือนว่าเหตุการณ์ดร็อปจะไม่เกิดขึ้นเมื่อฉันคาดหวัง

ฉันคิดว่าเหตุการณ์ดร็อปเริ่มทำงานเมื่อองค์ประกอบที่ถูกลากถูกปล่อยออกมาเหนือองค์ประกอบเป้าหมาย แต่ดูเหมือนจะไม่เป็นเช่นนั้น

ฉันเข้าใจผิดอะไร?

http://jsfiddle.net/LntTL/

$('.drop').on('drop dragdrop',function(){
    alert('dropped');
});
$('.drop').on('dragenter',function(){
    $(this).html('drop now').css('background','blue');
})
$('.drop').on('dragleave',function(){
    $(this).html('drop here').css('background','red');
})

เพื่อให้เหตุการณ์ดร็อปเกิดขึ้นในองค์ประกอบ div คุณต้องยกเลิกondragenterและondragoverเหตุการณ์ ใช้ jquery และรหัสของคุณที่ให้มา ...

$('.drop').on('drop dragdrop',function(){
    alert('dropped');
});
$('.drop').on('dragenter',function(event){
    event.preventDefault();
    $(this).html('drop now').css('background','blue');
})
$('.drop').on('dragleave',function(){
    $(this).html('drop here').css('background','red');
})
$('.drop').on('dragover',function(event){
    event.preventDefault();
})

สำหรับข้อมูลเพิ่มเติมโปรดดูที่หน้า MDN

คุณสามารถไปได้ด้วยการทำไฟล์ event.preventDefault()ในdragoverเหตุการณ์ การทำเช่นนี้จะทำให้dropเหตุการณ์เกิดขึ้น

เพื่อให้เหตุการณ์ดร็อปเริ่มทำงานคุณต้องกำหนด dropEffect ในช่วงโอเวอร์เหตุการณ์มิฉะนั้นเหตุการณ์ ondrop จะไม่ถูกทริกเกอร์:

$('.drop').on('dragover',function(event){
    event.preventDefault();
    event.dataTransfer.dropEffect = 'copy';  // required to enable drop on DIV
})
// Value for dropEffect can be one of: move, copy, link or none
// The mouse icon + behavior will change accordingly.

นี่ไม่ใช่คำตอบที่แท้จริง แต่สำหรับบางคนเช่นฉันที่ขาดวินัยในความสม่ำเสมอ Drop ไม่ใช้แฟลชสำหรับฉันในโครเมี่ยมเมื่อที่ไม่ได้ผลที่ผมได้กำหนดไว้สำหรับeffectAllowed dropEffectอย่างไรก็ตามมันได้ผลสำหรับฉันใน Safari ควรตั้งค่าดังนี้:

ev.dataTransfer.effectAllowed = 'move';

อีกวิธีหนึ่งeffectAllowedสามารถตั้งค่าเป็นallแต่ฉันต้องการรักษาความเฉพาะเจาะจงที่ฉันสามารถทำได้

สำหรับกรณีที่มีการย้ายเอฟเฟกต์ดรอป:

ev.dataTransfer.dropEffect = 'move';