HTML5：如何添加包装 div 以拖放文本答案

【问题标题】：HTML5 : How can I add a wrapping div to drag & drop textHTML5：如何添加包装 div 以拖放文本
【发布时间】：2012-10-14 14:20:48
【问题描述】：

我正在将带有文本/html 的段落中的文本拖到内容可编辑的 div 中。
我想为拖放的选定文本添加一个包装 div。
我尝试操纵所有拖放侦听器但没有成功。
我想过通过 dataTransfer 进行操作 - 但它似乎失败了。

e.dataTransfer.setData('Text', '<div>' + e.dataTransfer.getData('Text') +'</div>');

有什么想法吗？

【问题讨论】：

标签： html drag-and-drop

【解决方案1】：

我最近为 chrome (v24) 做了拖放代码。看来您需要为放置目标指定 dragover 处理程序并对其调用 event.preventDefault(); 操作，否则放置将不起作用。

如果你的问题只是被拖拽的内容的包装，你有一个很好的例子html5rock presentation

如上一个答案所述，您可以在 drop 处理程序上获取已删除的内容。虽然我在 chrome 中使用

var text = e.dataTransfer.getData('text/plain'); var html = e.dataTransfer.getData('text/html');

您可以通过检查 e.dataTransfer.types 来获取所有可用的 mime 类型

好像dragstart上可以设置拖拽的内容，但是不能读取，所以这个只能在drop事件监听器上使用。

event.dataTransfer.getData('text/plain')

【讨论】：

有效！谢谢！现在我有另一个问题：我添加了一个` "" + e.dataTransfer.getData('text/html') + "" `，现在我在 contenteditable div 中添加了所有其他内容拖动得到
不确定您的意思？你能解释一下你的主要问题吗？

【解决方案2】：

我在 Firefox 16 中有以下代码。

<style>
    #drophere {
        box-shadow: 0 0 3px #aaa;
        height: 200px;
        padding: 10px;
        width: 300px;
    }
</style>

<p id="dragthis" draggable="true">Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum </p>

<div id="drophere" contenteditable droppable="true"></div>

<script>
    var p = document.getElementById('dragthis');

    p.addEventListener( 'dragstart',
                        function(event) {
                            event.dataTransfer.setData('Text', event.target.innerHTML)
                        },
                        true
                    );

    var drop = document.getElementById('drophere');

    drop.addEventListener( 'drop',
                           function( event ) {
                               event.target.innerHTML = "&lt;div&gt;" + event.dataTransfer.getData('Text') + "&lt;/div&gt;";
                               event.preventDefault();
                           },
                           true
                       );
</script>

【讨论】：