拖放不起作用:未定义的“dropEffect”
Posted
技术标签:
【中文标题】拖放不起作用:未定义的“dropEffect”【英文标题】:Drag & Drop doenst not work: 'dropEffect' of undefined 【发布时间】: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>
【问题讨论】:
【参考方案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"
【讨论】:
以上是关于拖放不起作用:未定义的“dropEffect”的主要内容,如果未能解决你的问题,请参考以下文章