jQuery 拖放數據來自<div>標記為<textarea><i>tag</div></i><b>標簽</div></b></textarea><div id="text_translate"><p> 我正在研究，但我沒有辦法解決這個問題：</p><p> 我想將數據從<div>標簽拖放到<textarea>標簽， <textarea> textarea> 中的值將更改為 position，我將<div>標簽放在那里。</p><p> 示例：value1 -> 我將<div class="btn btn-info draggable">value1</div>拖到 < <textarea>Type something</textarea> -> 更改為<textarea> Type value1 something</textarea></p><p> 這是我當前的代碼： </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> $(document).ready(function () { $(".draggable").draggable({ revert: true, helper: 'clone', start: function (event, ui) { $(this).fadeTo('fast', 0.5); }, stop: function (event, ui) { $(this).fadeTo(0, 1); } }); $("#MessageArea").droppable({ hoverClass: 'active', drop: function (event, ui) { this.value += " *" + $(ui.draggable).text() + "* "; }, }); });</pre><pre class="snippet-code-html lang-html prettyprint-override"> <fieldset> <legend>Data Area</legend> <div class="btn btn-info draggable">value1</div> <div class="btn btn-info draggable">value2</div> </fieldset> <br /> <div class="form-group"> <textarea id="MessageArea">Type something</textarea> <br /> <input type="button" class="btn btn-warning" value="CLEAR" onclick="$('#MessageArea').val('');" /> </div></pre></div></div><p></p></div></div>

Question

我正在研究，但我沒有辦法解決這個問題：

我想將數據從<div>標簽拖放到<textarea>標簽， <textarea> textarea> 中的值將更改為 position，我將<div>標簽放在那里。

示例：value1 -> 我將<div class="btn btn-info draggable">value1</div>拖到 < <textarea>Type something</textarea> -> 更改為<textarea> Type value1 something</textarea>

這是我當前的代碼：

 $(document).ready(function () { $(".draggable").draggable({ revert: true, helper: 'clone', start: function (event, ui) { $(this).fadeTo('fast', 0.5); }, stop: function (event, ui) { $(this).fadeTo(0, 1); } }); $("#MessageArea").droppable({ hoverClass: 'active', drop: function (event, ui) { this.value += " *" + $(ui.draggable).text() + "* "; }, }); });

 <fieldset> <legend>Data Area</legend> <div class="btn btn-info draggable">value1</div> <div class="btn btn-info draggable">value2</div> </fieldset> <br /> <div class="form-group"> <textarea id="MessageArea">Type something</textarea> <br /> <input type="button" class="btn btn-warning" value="CLEAR" onclick="$('#MessageArea').val('');" /> </div>

Answer 1

我想在這里發布我的研究，因為我不知道如何在圖書館使用代碼筆。

會是這樣的。 但是數據，在我拖放之后得到 url 沒有得到標簽的文本。

您能否審閱一下並給我您的評論？

 <fieldset> <legend>Data Area</legend> <a href="#" class="btn btn-info" draggable="true">Text 1</a> <a href="#" class="btn btn-info" draggable="true">Text 2</a> <a href="#" class="btn btn-info" draggable="true">Text 3</a> </fieldset> <br /> <br /> <textarea id="MessageArea" class="form-control" rows="15" style="min-width: 100%">I have a pen</textarea>

Answer 2

歡迎來到堆棧溢出！

當我嘗試時，您的代碼工作正常。 查看這支筆： https://codepen.io/MortenDL/pen/yLOBZKP

但是，這不會根據需要更改 html 值。 如果您之后想要文本區域的值，您可以這樣做：

$("#MessageArea").val()