未捕获的类型错误:无法设置未定义的 main.js 的属性“dropEffect”
未捕获的类型错误:无法读取未定义的属性"file"
这里有什么问题
.咖啡
$ ->
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>
最佳答案
我认为问题可能出在您使用的是 jQuery 'dragover' 和 'drop' 事件，而不是 native drop 事件。如你所见here ，它提到必须将 DataTransfer 对象添加到 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");
你最好的选择可能是访问 originalEvent 对象，所以看看这是否有效:
handleDrop: (evt) ->
evt.stopPropagation()
evt.preventDefault()
files = evt.originalEvent.dataTransfer.files
handleDragOver: (evt) ->
evt.stopPropagation()
evt.preventDefault()
evt.originalEvent.dataTransfer.dropEffect = "copy"
关于javascript - 拖放不起作用 : 'dropEffect' of undefined，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14788862/