1

并且还拒绝非文本项目。这样用户就可以将文本拖放到输入字段中。如果用户尝试输入非文本，则不允许。

以下是检测 drop 事件的方法：

   input_element.addEventListener("drop", function (event) {

        // `this` points to the input element

        // implement is_text

        if (is_text) {
            label_element.style.opacity = 0;
        } else {
            // reject
        }
    }, false);

标签元素不透明度设置为0，使标签消失。

如何验证丢弃的“东西”实际上是文本？

这将指向

[Object HTMLInputElement]

.value保存文本（如果有）。

但是 this.value 将无法正确记录。即使 dom 检查器显示，console.log(this.value) 也不会显示该值。

活动举行

[ObjectDragEvent]
4

2 回答 2

3

您可以检测丢弃的数据是否是带有event.dataTransfer.typesdrop 事件的文本。

通过反复试验，我注意到它通常具有text/plain和text/html. 删除图像时，它也有这些类型，但还有一个额外的（一些 uri 的东西）。

所以你可以这样做：

input_element.addEventListener("drop", function (event) {
    var types = event.dataTransfer.types;

    if (types.length > 2 || types.indexOf("text/plain") === -1)
        event.preventDefault();
    else
        input_element.style.opacity = "0";
}, false);

请注意，我只在 chrome 上对此进行了测试。这在其他浏览器上可能有不同的行为。indexOf某些 IE 版本甚至不支持我使用的方法。

示例：http: //jsfiddle.net/DdbKD/4/

于 2013-06-16T22:19:22.723 回答
1 
var text = "some string";
if(typeof text == 'string') //true

您必须通过挂钩到它的 dragstart 左右来将税收添加到被拖动元素的 dataTransfer 中。检查http://html5demos.com/drag

addEvent(el, 'dragstart', function (e) {
  e.dataTransfer.effectAllowed = 'copy'; // only dropEffect='copy' will be dropable
  e.dataTransfer.setData('Text', this.id); // required otherwise doesn't work
});

如上面的示例链接

但是你想拖什么？

于 2013-06-16T21:30:59.490 回答