- From: Shumpei Shiraishi <shumpei.shiraishi@gmail.com>
- Date: Wed, 21 Oct 2009 12:59:15 +0900
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>
Received on Tuesday, 20 October 2009 20:59:15 UTC