Question

我正在尝试从WWWC（here）学习拖放示例，我可以在拖动时获取要从原始列表中删除的列表项，但不会出现在新列表中。任何想法为什么不呢？我尝试过Safari 5.1.1，Chrome 15和Firefox 7.0.1。

    <head>
        <title>Drag 'N Drop</title>
    </head>

    <p>What fruits do you like?</p>
    <ol ondragstart="dragStartHandler(event)" ondragend="dragEndHandler(event)">    
     <li draggable="true" data-value="fruit-apple">Apples</li>
     <li draggable="true" data-value="fruit-orange">Oranges</li>
     <li draggable="true" data-value="fruit-pear">Pears</li>
    </ol>
    <script>
      var internalDNDType = 'text/plain'; // set this to something specific to your site
      function dragStartHandler(event) {
        if (event.target instanceof HTMLLIElement) {
          // use the element's data-value="" attribute as the value to be moving:
          event.dataTransfer.setData(internalDNDType, event.target.dataset.value);
          event.dataTransfer.effectAllowed = 'move'; // only allow moves
        } else {
          event.preventDefault(); // don't allow selection to be dragged
        }
      }
      function dragEndHandler(event) {
        // remove the dragged element
        event.target.parentNode.removeChild(event.target);

      }
    </script>

    <p>Drop your favorite fruits below:</p>
    <div dropzone="move s:text/plain" ondrop="dropHandler(event)">
        <ol dropzone="move s:text/plain" ondrop="dropHandler(event)">
         <!-- don't forget to change the "text/x-example" type to something
         specific to your site -->
            <li>Bananas</li>
        </ol>
        </br>
        </br>
        </br>
    </div>
    <script>
      var internalDNDType = 'text/plain'; // set this to something specific to your site
      function dropHandler(event) {
        var li = document.createElement('li');
        var data = event.dataTransfer.getData(internalDNDType);
        if (data == 'fruit-apple') {
          li.textContent = 'Apples';
        } else if (data == 'fruit-orange') {
          li.textContent = 'Oranges';
        } else if (data == 'fruit-pear') {
          li.textContent = 'Pears';
        } else {
          li.textContent = 'Unknown Fruit';
        }
        event.target.appendChild(li);
      }
    </script>

Answer 1

有几个问题。首先，你的dropzone需要在拖动时取消事件：

<ol dropzone="move s:text/plain" ondrop="dropHandler(event)" ondragover="dragOverHandler(event)">

function dragOverHandler(event) {
    event.preventDefault();
    return false;
}

其次，你的dropHandler处理函数会多次被触发，因为大多数情况下，放置目标将是li元素，而不是ol（也可能是div，但我忽略了那个元素）。因此，要么只添加代码来处理ol处的事件，要么取消dropHandler with stopPropagation中的事件。

最后，删除项目时的默认操作（至少在Firefox中没有检查其他浏览器）是尝试导航到text/plain值表示的URL，因此您应该添加一些{ {1}}在可能的地方。这是一个更新的event.preventDefault()函数：

dropHandler

Here's my updated version

Answer 2

简短的回答是你还需要在掉落区域添加一个dragover监听器，以便允许掉落动作发生。

function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault(); // Necessary. Allows us to drop.
  }

  e.dataTransfer.dropEffect = 'move';

  return false;
}

您在此逐步tutorial中有详细解释（尽管该教程中的元素同时充当可拖动元素和拖放区域）

然而，克里斯，尽管我很高兴你正在尝试原生的HTML5拖放功能，但是当我说你的代码在标记级别和Javascript级别都有太多严重错误时，请接受我的拙见。即缺少标签，关闭不存在的标签，错误的属性名称空间，链接元素中的重复监听器，同一范围内的重复变量等等。我建议先进行几次代码审查。

拖放示例 - HTML5

2 个答案: