HTML5拖放

Question

我正在尝试使用dataTransfer.getData（http://html5demos.com/drag-anything）设置HTML5拖放操作，该操作会将任何文本读取到放置窗口并使用plupload（http://www.plupload.com）保存该数据。

当前代码：

if (getDataType.checked == false && e.dataTransfer.types) {
    li.innerHTML = '<ul>';
    [].forEach.call(e.dataTransfer.types, function (type) {
      li.innerHTML += '<li>' + entities(e.dataTransfer.getData(type) + ' (content-type: ' + type + ')') + '</li>';
      if (e.dataTransfer.types == 'Files') {
          li.innerHTML += '<li>' + entities(e.dataTransfer.getData(type) + ' (uploadable: ' + type + ')') + '</li>';
      }
    });
    li.innerHTML += '</ul>';

  } else {
    // ... however, if we're IE, we don't have the .types property, so we'll just get the Text value
    li.innerHTML = e.dataTransfer.getData('Text');
  }

我需要帮助将dataTransfer.getData的输出传递到plupload和dropzone，从而知道文件和文本片段之间的区别。

编辑：围绕我尝试过的内容添加更多上下文。 1.如果放置的项目是文件，请使用if语句执行某些操作。 这是行不通的，因为（我认为）项目已被删除，因此无法上载。2.获取dataTransfer.files，但不存储可上载的文件，并且会破坏片段的实时编写。

我认为该解决方案涉及在开始时查询放置的项目，然后使用plupload来存储文件，并使用dataTransfer.getData来创建代码段-问题是我不知道该怎么做。 任何帮助将非常感激。

Answer 1

您可以将另一个事件绑定到plupload droparea。 在该事件上，检查其是否为摘要，如果需要，请对摘要进行操作。 否则，只需让plupload处理文件的拖放操作即可。

www.plupload.com上有很多示例，它们也有一些非常好的论坛。

另外，我还在这里http://www.foliotek.com/devblog/plupload-custom-file-upload-ui/上写了一篇博客文章，展示了如何绑定自定义用户界面，该用户界面使用拖放区使用Plupload来管理上传文件。

希望有帮助...