CODEWITHSUNDEEP
javascriptjquery
Nguyen Anh Duy
Nguyen Anh Duy

Reputation: 33

jQuery Drag & Drop data from <div> tag to <textarea> tag

I was researching but I don't have a way to solve this problem:

I would like to drag & drop the data from <div> tag to <textarea> tag with value in <textarea> will be change follow to position, where I drop the <div> tag.

Example: value1 -> I drag <div class="btn btn-info draggable">value1</div> to <textarea>Type something</textarea> -> change to <textarea> Type value1 something</textarea>

This is my current code:

$(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>

Upvotes: 2

Views: 1089

Answers (2)

Nguyen Anh Duy
Nguyen Anh Duy

Reputation: 33

I would like to post my research here because I don't know how to use codepen at the library.

It will be like this. But the data, that after I drag & drop is get url not get text of tag.

Could you please review it and give me your comment?

<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>

Upvotes: 1

JohnDoe
JohnDoe

Reputation: 545

Welcome to stack overflow!

Your code works fine when i try. Check out this pen: https://codepen.io/MortenDL/pen/yLOBZKP

However, this will not change the html values as you want. If you want the value from the textarea afterwards you can do this:

$("#MessageArea").val()

Upvotes: 0

Related Questions