拖动& drop doenst不工作：'dropEffect'未定义 [英] Drag & Drop doenst not work: 'dropEffect' of undefined
问题描述
未捕获的TypeError：无法设置未定义的main.js的属性dropEffect
未捕获的TypeError：无法读取未定义的属性文件 b
这里有什么问题
.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）。attrsrc，src
.Html
<！DOCTYPE html>
< html lang =en>
< head>
< link rel =stylesheettype =text / csshref =css / main.css>
< / head>
< body>
< div id =drop_zonestyle =width：100px; height：100px; border：2px dotted #bbb;
-moz-border-radius：5px;
-webkit- border-radius：5px;
border-radius：5px;
padding：25px;
text-align：center;
color：#bbb;& / div>
< / body>
< script type =text / javascriptsrc =js / lib / jquery-1.9.1.min.js>< / script>
< script type =text / javascriptsrc =js / main.js>< / script>
< / html>
我认为问题可能是您使用事件，而不是原生drop事件，而不是原生的drop事件。jQuery 'dragover'和'drop'您可以在此处中看到，它提到必须将DataTransfer对象添加到jQuery事件对象： / p>
OtherProperties
某些活动可能有给他们。这些可以作为event.originalEvent对象的属性来访问。要使特殊属性在所有事件对象中可用，可以将它们添加到jQuery.event.props数组中。不建议这样做，因为它会对jQuery提供的每个事件增加开销。
示例：
//添加用于本地`drop`事件的dataTransfer属性
//捕获放入浏览器窗口中的文件的信息
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
Uncaught TypeError: Cannot set property 'dropEffect' of undefined main.js
Uncaught TypeError: Cannot read property 'files' of undefined
What's wrong here
.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>
I think the problem may be that you are using the jQuery 'dragover' and 'drop' event rather than the native drop event. As you can see here, it mentions having to add the DataTransfer object to the jQuery event object:
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");
Your best bet is probably to access the originalEvent object, so see if this works:
handleDrop: (evt) ->
evt.stopPropagation()
evt.preventDefault()
files = evt.originalEvent.dataTransfer.files
handleDragOver: (evt) ->
evt.stopPropagation()
evt.preventDefault()
evt.originalEvent.dataTransfer.dropEffect = "copy"
这篇关于拖动& drop doenst不工作：'dropEffect'未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
