Question

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

以下是检测丢弃事件的方法：

   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保留文本（如果有）。

Howerver this.value将无法正确记录。即使dom检查器执行操作，console.log（this.value）也不会显示该值。

事件成立

[ObjectDragEvent]

Answer 1

您可以检测丢弃的数据是否为包含丢弃事件event.dataTransfer.types的文本。

通过反复试验我发现它通常有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上测试了这个。这可能在其他浏览器上有不同的行为。某些IE版本甚至不支持我正在使用的indexOf方法。

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

Answer 2

var text = "some string";
if(typeof text == 'string') //true

你必须通过挂钩到它的dragstart左右来将taxt添加到拖动元素的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
});

如上例链接

但是你想要拖什么？

将删除的文本检测到输入元素？

2 个答案: