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

Thu Oct 22 17:41:50 PDT 2009

On Wed, 21 Oct 2009, Shumpei Shiraishi wrote:
>
> <!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;
>     }
>   }
> }

Here you want to put the preventDefault() after the for() loop, so that it 
cancels the event only if the type was not found.

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

With that modification, your example works for me in Firefox. It crashes 
the Safari build I have, not sure what that's about.

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'