Drag & Drop nie doenst pracy: 'dropEffect' undefined

Uncaught TypeError: nie można ustawić właściwość 'dropEffect' niezdefiniowanych main.js
Uncaught TypeError: nie można czytać 'pliki' własność undefinedDrag & Drop nie doenst pracy: 'dropEffect' undefined

Co się stało tutaj

.coffee

$ -> 
    app = new Viewr 

class Viewr 

    constructor:() -> 
    $('#drop_zone') 
    .bind('dragover', @handleDragOver) 
    .bind('drop', @handleDrop) 

    handleDrop: (evt) -> 
    evt.stopPropagation() 
    evt.preventDefault() 
    files = evt.dataTransfer.files 

    @setActiveImage files[0] 

    handleDragOver: (evt) -> 
    evt.stopPropagation() 
    evt.preventDefault() 
    evt.dataTransfer.dropEffect = "copy" 

    setActiveImage: (image)-> 
    $("img").attr "src", src

.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link rel="stylesheet" type="text/css" href="css/main.css"> 
</head> 
<body> 
    <div id="drop_zone" style="width: 100px; height: 100px; border: 2px dashed #bbb; 
           -moz-border-radius: 5px; 
           -webkit-border-radius: 5px; 
           border-radius: 5px; 
           padding: 25px; 
           text-align: center; 
           color: #bbb;">Drop files here</div> 
</body> 
<script type="text/javascript" src="js/lib/jquery-1.9.1.min.js"></script> 
<script type="text/javascript" src="js/main.js"></script> 
</html>

Źródło

2013-02-09 fabian

Myślę, że problem może polegać na tym, że używasz zdarzenia jQuery 'dragover' i 'drop', a nie zdarzenia dropu rodzimego. Jak widać here, wspomina konieczności dodać obiekt DataTransfer do obiektu zdarzenia jQuery:

OtherProperties

Certain events may have properties specific to them. Those can be accessed as properties of the event.originalEvent object. To make special properties available in all event objects, they can be added to the jQuery.event.props array. This is not recommended, since it adds overhead to every event delivered by jQuery.

Example:
// add the dataTransfer property for use with the native `drop` event 
// to capture information about files dropped into the browser window 
jQuery.event.props.push("dataTransfer"); 

Najprościej jest prawdopodobnie uzyskać dostęp do obiektu originalEvent, więc sprawdzić, czy to działa:

handleDrop: (evt) -> 
    evt.stopPropagation() 
    evt.preventDefault() 
    files = evt.originalEvent.dataTransfer.files 

handleDragOver: (evt) -> 
    evt.stopPropagation() 
    evt.preventDefault() 
    evt.originalEvent.dataTransfer.dropEffect = "copy"

Źródło

2013-02-09 22:12:49 phenomnomnominal

Drag & Drop nie doenst pracy: 'dropEffect' undefined

Odpowiedz

Powiązane problemy