不触发 drop 事件答案

【问题标题】：drop event is not fired不触发 drop 事件
【发布时间】：2012-12-22 02:09:20
【问题描述】：

在下面的应用程序中，从不调用 drop 方法。放置目标 (div2) 由 dragEnter 和 dragOver 事件中的取消事件指示，但不会触发放置。 HTML和.dart如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Dandd</title>
 <link rel="stylesheet" href="dandd.css">
</head>
<body>
<h1>Drag and drop</h1>

<p>Hello world from Dart!</p>
<div>
  <label id='lbl' draggable='true'  style='border: 1px solid; '>div1</label>
 </div>
<p></p>

<div id='div2'>
  <label>div2</label>
 </div>
<script type="application/dart" src='dandd.dart > </script>
<script type='text/javascript'  
   src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
</body>
</html>

这是飞镖文件

import 'dart:html';

void main() {
  query('#lbl')
    ..on.dragStart.add(onDragStart)
    ..on.dragEnd.add(onDragEnd);

  query('#div2')
    ..on.dragEnter.add(onDragEnter)
    ..on.dragOver.add(onDragOver)
    ..on.drop.add(onDrop);

  query('#div2')
    ..on.dragLeave.add(onDragLeave);
}

onDragStart(MouseEvent e) {
  print('started');
  var lbl = e.target as LabelElement;
  lbl.style.opacity = '0.4';
  e.dataTransfer.setData('text', lbl.id);
}

onDragEnd(MouseEvent e) {
 var lbl = e.target as LabelElement;
 lbl.style.opacity = '1.0';
 print('drag end called');
}

onDragEnter(MouseEvent e) {
  e.stopPropagation();
  e.dataTransfer.dropEffect = 'move';
  var x = e.target as DivElement;
  x.classes.add('blueborder');
}

onDragOver(MouseEvent e) {
  e.stopPropagation();
  e.dataTransfer.dropEffect = 'move';
  var x = e.target as DivElement;
  x.classes.add('blueborder');
}

onDragLeave(MouseEvent e) {
  var x = e.target as DivElement;
  x.classes.remove('blueborder');
}

onDrop(MouseEvent e){
  print('on drop called');
  var x = e.target as DivElement;
  x.classes.remove('blueborder');
  String sid = e.dataTransfer.getData('text');
  var v = query('#{sid}');
  x.children.add(v);
}

【问题讨论】：

问题现已修复。仍然看到此问题的用户应确保他们正在调用 preventDefault 并在 onDragOver 中设置 dropEffect（在 onDragEnter 中执行此操作将不起作用）
很抱歉提出这个老问题，但我遇到了 ams 问题。甚至设置 e.dataTransfer.dropEffect = "copy";在 onDragOver 并在 onDrag 上调用 e.preventDefault() 并返回 false 没有帮助。即使编译成 JavaScript - 你能给我一个工作示例吗？

标签： drag-and-drop dart

【解决方案1】：

它看起来像一个错误。见issue 6646。

【讨论】：