0

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

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

有任何想法吗？

4

2 回答 2

1

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

如果您的问题只是被拖动内容的包装，那么您有一个很好的例子在这里html5rock 演示

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

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

您可以通过检查e.dataTransfer.types

似乎您可以将拖动的内容设置为dragstart，但不能读取它，因此这仅适用于drop事件侦听器。

event.dataTransfer.getData('text/plain')
于 2012-10-14T06:20:48.810 回答
0

我有以下代码在 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>
于 2012-10-14T05:16:51.447 回答