0

text/htmlのある段落からcontenteditabledivにテキストをドラッグしています。
ドロップされた選択されたテキストにラッピングdivを追加したいと思います。
すべてのドラッグアンドドロップリスナーを操作しようとしましたが、成功しませんでした。
dataTransferを介して操作することを考えましたが、失敗したようです。

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

何か案は？

4

2 に答える 2

1

最近、chromeのドラッグアンドドロップコードを実行しました（v24）。dragoverドロップターゲットのハンドラーを指定してevent.preventDefault();アクションを呼び出す必要があるようです。指定しないと、ドロップが機能しません。

問題がドラッグされたコンテンツのラッピングのみである場合は、ここにhtml5rockプレゼンテーションの良い例があります。

drop前の回答が述べているように、ハンドラーでドロップされたコンテンツを取得できます。クロームでは使用していますが

var text = e.dataTransfer.getData（'text / plain'）;
 var html = e.dataTransfer.getData（'text / html'）;

利用可能なすべてのmimeタイプを取得するには、e.dataTransfer.types

ドラッグしたコンテンツはに設定できるようですがdragstart、読み取ることはできないため、これはdropイベントリスナーでのみ使用できます。

event.dataTransfer.getData（'text / plain'）
于 2012-10-14T06:20:48.810 に答える
0

Firefox16で動作する次のコードがあります。

<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 に答える