拖放不起作用：未定义的“dropEffect”答案

【问题标题】：Drag & Drop doenst not work: 'dropEffect' of undefined拖放不起作用：未定义的“dropEffect”
【发布时间】：2013-01-25 04:20:04
【问题描述】：

未捕获的类型错误：无法设置未定义 main.js 的属性“dropEffect”
未捕获的类型错误：无法读取未定义的属性“文件”

这里有什么问题

.咖啡

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

【问题讨论】：

标签： javascript html coffeescript

【解决方案1】：

我认为问题可能在于您使用的是 jQuery 'dragover' 和 'drop' 事件，而不是原生的 drop 事件。如您所见here，它提到必须将 DataTransfer 对象添加到 jQuery 事件对象：

其他属性

某些事件可能具有特定于它们的属性。这些可以作为 event.originalEvent 对象的属性访问。要使所有事件对象中的特殊属性可用，可以将它们添加到 jQuery.event.props 数组中。不建议这样做，因为它会增加 jQuery 传递的每个事件的开销。

示例：
// 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");

您最好的选择可能是访问originalEvent 对象，所以看看这是否有效：

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

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

【讨论】：