Question

这是我的工作代码：

＆＃13;

function dodrop(event)  {
  var dt = event.dataTransfer;
  var files = dt.files;
  var count = files.length;
  output("File Count: " + count + "\n");
  for (var i = 0; i < files.length; i++) {
	  output(" File " + i + ":\n(" + (typeof files[i]) + ") : <" + files[i] + " > " + files[i].name + " " + files[i].size + "\n");
  }
}

function output(text) {
  $('.drag-and-drop').text($('.drag-and-drop').text() + text);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="output" class="drag-and-drop" style="min-height: 200px; white-space: pre; border: 1px solid black;"
			ondragenter="document.getElementById('output').textContent = ''; event.stopPropagation(); event.preventDefault();"
			ondragover="event.stopPropagation(); event.preventDefault();"
			ondrop="event.stopPropagation(); event.preventDefault(); dodrop(event);">
					 DROP FILES HERE FROM FINDER OR EXPLORER
		</div>

＆＃13;

此代码显示有关已删除文件的信息，并且它正常工作。

但是，如果我从div标签中删除内联事件并使用Jquery，它就不会起作用。我试图将内联事件转换为这样的jQuery事件：

＆＃13;

    $('.drag-and-drop').on('dragenter', function(event){
    	event.stopPropagation();
    	event.preventDefault();
    });
    
    $('.drag-and-drop').on('dragover', function(event){
    	event.stopPropagation();
    	event.preventDefault();
    });
    
    $('.drag-and-drop').on('drop', function(event){
    	event.stopPropagation(); 
    	event.preventDefault();
    	console.log(event);
    	dodrop(event);
    });

function dodrop(event)  {
      var dt = event.dataTransfer;
      var files = dt.files;
      var count = files.length;
      output("File Count: " + count + "\n");
      for (var i = 0; i < files.length; i++) {
    	  output(" File " + i + ":\n(" + (typeof files[i]) + ") : <" + files[i] + " > " + files[i].name + " " + files[i].size + "\n");
    	}
    }

    function output(text) {
      $('.drag-and-drop').text($('.drag-and-drop').text() + text);
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output" class="drag-and-drop" style="min-height: 200px; white-space: pre; border: 1px solid black;">
  DROP FILES HERE FROM FINDER OR EXPLORER
</div>

＆＃13;

但是在jQuery drop事件中，返回的事件与内联ondrop返回的事件不相等。我想我需要编辑我的jQuery代码，但我不确定我做错了什么......

提前致谢

Answer 1

jQuery事件对象与DOM事件对象略有不同。您可以通过调用originalEvent属性来访问原始事件对象。

dt = event.originalEvent.dataTransfer

Jquery ondrop事件与内联ondrop事件

1 个答案: