在 contenteditable 中模拟拖动类型文本/普通行为答案

【问题标题】：Emulate drag type text/plain behavior in contenteditable在 contenteditable 中模拟拖动类型文本/普通行为
【发布时间】：2013-01-22 20:25:20
【问题描述】：

如果你拖动例如text/plain 或 text/html，您想要放置的 contenteditable 元素将插入符号/光标放置在您要放置拖动内容的位置。

一个非常基本的小提琴来表达我的意思：example

<div contenteditable="true">DROP TEXT HERE</div>
This text wants to be dropped.

如何模拟自定义数据类型的这种行为？或者：如何在悬停时始终将插入符号放在鼠标指针旁边？

【问题讨论】：

标签： javascript html drag-and-drop draggable contenteditable

【解决方案1】：

你可以使用 CSS :empty 伪选择器

[contenteditable="true"] {
    border: 2px solid #ccc;
    min-height: 1em;
}
[contenteditable="true"]:empty:before {
    content: 'DROP TEXT HERE';
    color: #999;
}

example

【讨论】：