拖放doenst不起作用:未定义“dropEffect来”(Drag & Drop doenst n

2019-08-16 21:19发布

遗漏的类型错误:无法设置未定义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>

Answer 1:

我认为这个问题可能是您正在使用jQuery 'dragover''drop'事件,而不是本机放置事件。 正如你可以看到这里 ,它提到不必dataTransfer对象添加到jQuery的事件对象:

OtherProperties

某些事件可能有特定于它们的性能。 那些可以作为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"


文章来源: Drag & Drop doenst not work: 'dropEffect' of undefined