HTML5拖放;拖放文本:默认与移动
我有两个内容可编辑div,其中包含格式化内容(例如,其中的段落包含粗体/斜体文本等),我希望将所选文本从一个移动到另一个。它在本机上运行良好,但我想在删除移动的文本时“清理”它,例如删除任何格式(“hello”将变成“hello”)。 所以我决定使用HTML5删除事件,如下所示:HTML5拖放;拖放文本:默认与移动,html,drag-and-drop,contenteditable,Html,Drag And Drop,Contenteditable,我有两个内容可编辑div,其中包含格式化内容(例如,其中的段落包含粗体/斜体文本等),我希望将所选文本从一个移动到另一个。它在本机上运行良好,但我想在删除移动的文本时“清理”它,例如删除任何格式(“hello”将变成“hello”)。 所以我决定使用HTML5删除事件,如下所示: dropHandler = function(e) { text = e.dataTransfer.getData('text'); if (document.caretRangeFromPoin
dropHandler = function(e) {
text = e.dataTransfer.getData('text');
if (document.caretRangeFromPoint)
{
range = document.caretRangeFromPoint(e.clientX, e.clientY);
}
else if (document.createRange && oe.rangeParent)
{
range = document.createRange();
range.setStart(oe.rangeParent, oe.rangeOffset);
}
range.insertNode(document.createTextNode(text));
return false;
};
它可以工作并将“已清理”(纯)文本放置到正确的位置,但源contenteditable div中最初选择的文本不会被删除-因为默认行为是通过“return false”阻止的-因此所需的文本移动成为文本副本。如何在预处理丢弃的文本的同时实现默认的文本移动行为?使用API(IE中除外)
dropHandler = function(e) {
text = e.dataTransfer.getData('text');
if (document.caretRangeFromPoint)
{
range = document.caretRangeFromPoint(e.clientX, e.clientY);
}
else if (document.createRange && oe.rangeParent)
{
range = document.createRange();
range.setStart(oe.rangeParent, oe.rangeOffset);
}
// Keep a reference to the text node so we can select it later
var textNode = document.createTextNode(text);
range.insertNode(textNode);
var sel = window.getSelection();
sel.deleteFromDocument();
range.selectNodeContents(textNode);
sel.removeAllRanges();
sel.addRange(range);
return false;
};