Drag & Drop in das Textfeld

Question

Ich versuche, eine Textbox und eine ziehbare Schaltfläche zu erstellen.

In dem Moment, in dem ich auf die Schaltfläche klicke, wird ein bestimmter Text zum Anfeuern der Textbox hinzugefügt (JavaScript und HTML).

Ich möchte eine Option hinzufügen, um die Schaltfläche in das Textfeld zu ziehen, die den gleichen Text verursacht, wenn ich auf die Schaltfläche klicke, die in das Textfeld eingefügt wird.

Wenn es möglich ist, würde ich auch gerne wählen, wo Sie diesen Text hinzufügen. Wenn ich z. B. den Knopf ziehe und mitten in einen Satz in das Textfeld ziehe, fügt er den Text in die Mitte des Satzes ein, wo ich den Text abgelegt habe und nicht am Anfang des Textfeldes.

Danke von Voraus.

Edit:

Hier ist ein Teil des Codes habe ich schon, sorry es ein wenig chaotisch (für das, was ich tue ich brauche alle alle in Zeichenfolge zu setzen).

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; 

Das Ergebnis im Moment: how the current code looks

Im Moment (ich in Ubuntu funktioniert, wenn es darauf ankommt), wenn es in Chrom ausgeführt, es mir die Tasten lassen ziehen (die Bilder) und setzen sie in den Text, aber es legte die "src" in das Textfeld anstelle des gewünschten Textes. Auf der anderen Seite, in Firefox können die Tasten nicht gezogen werden, auch wenn add ziehbare = "wahr".

Answer 1

Sie können es mit Drag & Drop-API tun.

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>

in Chrome getestet & Firefox.

Answer 2

nicht sicher, was Sie bisher getan haben, so dass es schwierig ist, zu helfen, aber es klingt wie jQuery UI hier nützlich sein könnte

Schauen Sie sich die Draggable und Droppable Funktionen