- From: Ian Hickson <ian@hixie.ch>
- Date: Fri, 23 Oct 2009 00:41:50 +0000 (UTC)
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. `._.-(,_..'--(,_..'`-.;.'
Received on Thursday, 22 October 2009 17:41:50 UTC