CODEWITHSUNDEEP
drag-and-dropdart
Tusshu
Tusshu

Reputation: 1734

drop event is not fired

In the application below, the drop method is never called. The drop target (div2) is indicated by cancelling event in dragEnter and dragOver events but drop is not triggered. HTML and .dart are as follows:

<!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>

and here is dart file

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

Upvotes: 2

Views: 674

Answers (1)

Alexandre Ardhuin
Alexandre Ardhuin

Reputation: 76193

It looks like a bug. See issue 6646.

Upvotes: 3

Related Questions