перетащить в текстовое поле

Question

Я пытаюсь создать текстовое поле и перетаскиваемую кнопку.

В тот момент, когда я нажимаю на кнопку, некоторый текст добавляется к попрошайничеству текстового поля (JavaScript и HTML).

Я хочу добавить опцию, чтобы перетащить кнопку в текстовое поле, которое вызовет тот же текст, когда я нажму кнопку, которая будет добавлена ​​в текстовое поле.

Если возможно, я также хотел бы выбрать, где добавить этот текст. I. Если я перетащил кнопку и перетащил середину предложения в текстовое поле, он добавит текст в середину предложения, где я опустил текст, а не в начале текстового поля.

Спасибо заранее.

Edit:

Вот часть кода я уже сделал, жаль, что это немного грязный (за то, что я делаю, мне нужно все поставить все в строке).

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

На данный момент (я работаю в убунту, если это имеет значение), если запустить его в хром, он позволил мне перетащить кнопки (картинки) и положить их в тексте, но он помещает «src» в текстовое поле вместо текста, который я хочу. С другой стороны, в firefox кнопки нельзя перетаскивать, даже если добавить draggable = "true".

Answer 1

Вы можете сделать это с помощью Drag & Drop-API.

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>

Испытано в Chrome & Firefox.

Answer 2

Не уверен, что вы делали до сих пор, так что трудно помочь, но это звучит как JQuery UI может быть полезным здесь

Отъезд Draggable и Droppable функции