Question

在下面的应用程序中，永远不会调用drop方法。通过取消dragEnter和dragOver事件中的事件来指示放置目标（div2），但不会触发放置。 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>

这里是dart文件

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);
}

Answer 1

它看起来像一个bug。请参阅issue 6646。

drop事件未被触发

1 个答案: