ドラッグ＆ドロップでテキストボックス

Question

私は、テキストボックスとドラッグ可能なボタンを作成しようとしています。私は特定のテキストは、テキストボックス（JavaScriptとHTML）の物乞いに追加されるボタンをクリックした瞬間で

。

は、私はテキストボックスに追加するボタンをクリックしたときから、同じテキストが発生しますテキストボックスにボタンをドラッグするためのオプションを追加したいです。

可能であれば、このテキストをどこに追加するかを選択したいと考えています。私は、ボタンをドラッグしてテキストボックスの文の途中でドラッグすると、文章の途中にテキストを追加し、テキストボックスの先頭には挿入しません。

ありがとうございます。

編集：ここでは

は、私はすでにやったコードの一部である、それは少し厄介（私がやっている何のために私は、文字列内のすべてを置くためにすべてを必要とする）申し訳ありません。

現時点で

var emoticon1 = "<input title='curious' onclick='add_tag("+'"curious"'+");' type='image' id='cur' src='/content/modules/dev/emoticons/curious.png' style='height:48px;width:48px;' />"; 
var emoticon2 = "<input title='confused' onclick='add_tag("+'"confused"'+");' type='image' id='con' src='/content/modules/dev/emoticons/confused.png' style='height:48px;width:48px;' />"; 
var emoticon3 = "<input title='helpful' onclick='add_tag("+'"helpful"'+");' type='image' id='help' src='/content/modules/dev/emoticons/helpful.png' style='height:48px;width:48px;' />"; 
var emoticon4 = "<input title='intersted' onclick='add_tag("+'"intersted"'+");' type='image' id='inte' src='/content/modules/dev/emoticons/interested.png' style='height:48px;width:48px;' />"; 
var tmp = "var txt=document.getElementById('commentTB').value;txt='#' + type + ' ' + txt ;document.getElementById('commentTB').value=txt;"; 

var fun = "<script> function add_tag(type) {"+tmp+"} </script>"; 
var emoticonsList = fun + emoticon1 + emoticon2 + emoticon3 + emoticon4; 

結果：現時点では how the current code looks

（それが重要ならば、私はUbuntuので働く）、クロームでそれを実行した場合、それは私がボタン（写真）をドラッグしてみましょうと置きますそれらはテキストの中にありますが、私は望むテキストの代わりに "src"をテキストボックスに置きます。一方、Firefoxでは、draggable = "true"を追加しても、ボタンをドラッグすることはできません。

Answer 1

ドラッグ& Drop-APIで行うことができます。クローム& Firefoxで動作確認済み

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

#buttons p { 
 
    appearance:button; 
 
    -moz-appearance:button; 
 
    -webkit-appearance:button; 
 
    display: inline-block; 
 
    padding: 2px 5px; 
 
}

<div id="buttons"> 
 
    <p draggable="true" id="1">This</p> 
 
    <p draggable="true" id="2">is</p> 
 
    <p draggable="true" id="3">a</p> 
 
    <p draggable="true" id="4">simple</p> 
 
    <p draggable="true" id="5">Drag'n'Drop-Test</p> 
 
</div> 
 

 
<textarea></textarea>

。ここ

Answer 2

あなたがこれまでに何をやったか、それは助けることは困難だが、それはjQueryのUIのように聞こえるので、有用である可能性わからない

DraggableとDroppable機能