2
在下面的应用程序中，从不会调用拖放方法。放弃目标（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>
，这里是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);
}
问题现在显示已修复。仍然看到这个的用户应该确保他们正在调用preventDefault并在onDragOver中设置dropEffect（在onDragEnter中执行此操作将不起作用） –
对不起推动这个老问题，但我有ams问题。即使设置e.dataTransfer.dropEffect =“copy”;在onDragOver上调用onDrag上的e.preventDefault（）并返回false不起作用。即使编译成JavaScript，你能给我一个工作的例子吗？ – Dafen