[whatwg] Issue on drag & drop example in specification?

Tue Oct 20 20:59:15 PDT 2009

Hi, all.

When I try to run the example in HTML5 specification, I find it seems
strange a little.
Here is a quote by specification:
"To accept a drop, the drop target has to listen to at least three
events. First, the dragenter  event, which is used to determine
whether or not the drop target is to accept the drop. If the drop is
to be accepted, then this event has to be canceled."

and the summary of the example is follows:

==============
  function dragEnterHandler(event) {
    // cancel the event if the drag contains data of our type
    if (event.dataTransfer.types.contains(expectedType)
      event.preventDefault();
  }
  function dragOverHandler(event) {
    event.preventDefault();
  }
  function dropHander(event {
    ...perform drop...
  }
==============

But when I tried above code on Firefox3.5 and Safari4, the data of bad
type are accepted by drop target because drag&drop operation is not
canceled in spite of preventDefault() is not called on
dragEnterHandler and preventDefault() is always called on
dragOverHandler.

Is it a bug of implementation?Or the example of specification is wrong?
The code I tried is pasted on tail of this mail.

Kind regards.

-Shumpei

========= EXAMPLE I TRIED ============
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul, li {
 -webkit-user-drag: element;
}
</style>
<script type="text/javascript">
function onDragStart(event) {
  if (event.target.tagName.toLowerCase() == "li") {
    var dt = event.dataTransfer;
    dt.dropEffect = "copy";
    dt.setData("listItemId", event.target.id);
  } else {
    event.preventDefault();
  }
  return true;
}
function onDrop(event) {
  var id = event.dataTransfer.getData("listItemId");
  var li = document.getElementById(id);
  if (li && li.parentNode != event.currentTarget) {
    li.parentNode.removeChild(li);
    event.currentTarget.appendChild(li);
  }
  event.stopPropagation();
}
function onDragOver(event) {
  event.preventDefault();
}
function onDragEnter(event) {
  var types = event.dataTransfer.types;
  for (var i = 0; i < types.length; i++) {
    if (types[i] == "listItemId") {
      // When this code is ommited, drag & drop operation should be canceled.
      // But it doesn't come to that on Safari4 and FF3.5. Why?

      // event.preventDefault();
      return true;
    }
  }
}
</script>
</head>
<body>
<ul id="list1"
  ondragstart="onDragStart(event)"
  ondragenter="onDragEnter(event)"
  ondragover="onDragOver(event)"
  ondrop="onDrop(event)">
  <li id="apple1" draggable="true">APPLE</li>
  <li id="grape1" draggable="true">GRAPE</li>
  <li id="orange1" draggable="true">ORANGE</li>
</ul>
<ul id="list2"
  ondragstart="onDragStart(event)"
  ondragenter="onDragEnter(event)"
  ondragover="onDragOver(event)"
  ondrop="onDrop(event)">
  <li id="apple2" draggable="true">Apple</li>
  <li id="grape2" draggable="true">Grape</li>
  <li id="orange2" draggable="true">Orange</li>
</ul>
</body>
</html>