拖放到文本框

-2

我在創建一個文本框和一個可拖動的按鈕。拖放到文本框

當我點擊按鈕時，某個文本被添加到文本框（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的工作，如果它很重要），如果在Chrome運行它，它讓我拖動按鈕（圖片），並把他們在文本中，但它把「src」放在文本框中，而不是我想要的文本。另一方面，在Firefox中，即使添加draggable =「true」，也不能拖動按鈕。

來源

2016-04-22 rfire

你有什麼迄今所做？ – TechTreeDev

在編輯中添加了我迄今爲止所做的。 – rfire

您可以通過拖拽& 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瀏覽器。

來源

2016-04-22 12:04:43

不知道到目前爲止你做過什麼，所以很難幫助，但它聽起來像jQuery用戶界面可以在這裏有用

時退房Draggable和Droppable功能

來源

2016-04-22 12:06:04

拖放到文本框

回答

相關問題