Question

我正在尝试使用原生js进行简单的拖放操作，但它似乎无法正常工作。这里的console.log没有显示。我错过了什么？

var drag = document.getElementById('drag'),
  drop = document.getElementById('dropped');

drag.addEventListener('dragstart', function(e) {
  e.preventDefault();
  console.log('drag');
})

drop.addEventListener('drop', function(e) {
  e.preventDefault();
  conosle.log(e);
})
drop.addEventListener('dragover', function(e) {
  e.preventDefault();
  conosle.log(e);
})

#dropped {

  background: #000;

  width: 400px;

  height: 400px;

}

<div id="drag" draggable="true">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi eveniet illo, nisi placeat neque voluptatem sit ipsam corporis. Veritatis dicta perspiciatis temporibus error amet. Laborum, vero amet magnam nihil debitis!</p>
</div>

<div id="dropped">

</div>

Answer 1

使用本机JS进行拖动时，不应该阻止默认。见这里：

＆＃13;

var drag = document.getElementById('drag'),
  drop = document.getElementById('dropped');

drag.addEventListener('dragstart', function(e) {
  console.log('drag');
})

drop.addEventListener('drop', function(e) {
  e.preventDefault();
  console.log(e);
  alert('dropped!');
})
drop.addEventListener('dragover', function(e) {
  e.preventDefault();
})

＆＃13;

#dropped {
  background: #000;
  width: 400px;
  height: 400px;
}

＆＃13;

<div id="drag" draggable="true">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi eveniet illo, nisi placeat neque voluptatem sit ipsam corporis. Veritatis dicta perspiciatis temporibus error amet. Laborum, vero amet magnam nihil debitis!</p>
</div>

<div id="dropped">

</div>

＆＃13;

关于preventDefault（）以及应该使用的位置和原因的一点解释：

在dragenter和dragover事件期间调用preventDefault方法将指示在该位置允许丢弃。但是，您通常希望仅在某些情况下调用preventDefault方法，例如，仅在拖动链接时调用。要执行此操作，请调用检查条件的函数，并仅在满足条件时取消事件。如果不满足条件，请不要取消该事件，如果用户释放鼠标按钮，则不会发生丢弃。

dragenter和dragover事件的侦听器用于指示有效的放置目标，即拖放项目可能被丢弃的位置。网页或应用程序的大多数区域都不是丢弃数据的有效位置。因此，这些事件的默认处理是不允许丢弃。

如果要允许丢弃，则必须通过取消事件来阻止默认处理。您可以通过从属性定义的事件侦听器返回false，或者通过调用事件的event.preventDefault方法来执行此操作。后者在单独脚本中定义的函数中可能更可行。

在网页中，如果您已接受删除，则应调用事件的preventDefault方法，以便默认浏览器处理也不会处理已删除的数据。例如，当链接被拖动到网页时，Firefox将打开该链接。通过取消事件，将阻止此行为。

所有引自：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations

Javascript拖动事件不起作用

1 个答案: