drag and drop only text of the li into textarea in jQuery

jQuery demo

I have written various code snippets for drag and drop element from one to another including drag an element and convert it into another element and then drop with the help of jQuery.

This time I will show you how can you drag text or value of the one element and append or insert this text into textarea html element. The code can be useful to create email and newsletter template at run time. The following code will work on all major browser including IE9.

Demo – Create E-mail Template(using drag and drop)

Click on any item from ‘Available Fields’ panel with your left mouse button, then, without releasing the button, drag it to the desired order on right panel and release the mouse button to drop it.

Available Fields

  • Name
  • Address
  • Phone
  • Sender Name
  • Sender Address
  • Sender Phone
  • Sender Email
  • Other1
  • Other2
  • Other3
  • Other4
  • Other5
Subject:
Read HTML5 Canvas Tutorial

Code

To add drag-and-drop functionality, you need to include both the jQuery library and the jQuery UI library plugin.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js" type="text/javascript"></script>
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
    <style>
        .textarea{background: #fff;}
        .dragitems{width: 20%; float: left; background: #f1f1f1;}
        .dropitems{width: 70%;float: left;background: #f1f1f1;
                   margin-left: 20px;padding:5px 5px 5px 5px;}
        .dragitems ul{list-style-type: none;padding-left: 5px;
                   display: block;}
        #content{height: 400px;width: 650px;}
    </style>
    <script language="javascript" type="text/javascript">
        $(function() {
            $("#allfields li").draggable({
                appendTo: "body",
                helper: "clone",
                cursor: "select",
                revert: "invalid"
            });
            initDroppable($("#TextArea1"));
            function initDroppable($elements) {
                $elements.droppable({
                    hoverClass: "textarea",
                    accept: ":not(.ui-sortable-helper)",
                    drop: function(event, ui) {
                        var $this = $(this);
 
                        var tempid = ui.draggable.text();
                        var dropText;
                        dropText = " {" + tempid + "} ";
                        var droparea = document.getElementById('TextArea1');
                        var range1 = droparea.selectionStart;
                        var range2 = droparea.selectionEnd;
                        var val = droparea.value;
                        var str1 = val.substring(0, range1);
                        var str3 = val.substring(range1, val.length);
                        droparea.value = str1 + dropText + str3;
                    }
                });
            }
        });
    </script>

Demo – Create E-mail Template(using drag and drop)

Available Fields

  • Name
  • Address
  • Phone
  • Sender Name
  • Sender Address
  • Sender Phone
  • Sender Email
  • Other1
  • Other2
  • Other3
  • Other4
  • Other5
Subject: Read HTML5 Canvas Tutorial

13 thoughts on “drag and drop only text of the li into textarea in jQuery”

  1. How could I integrate rich textarea to this? I failed with every one I tried, dragging breaks

  2. Hi there,

    I am looking for a solution where I can drag and drop a token (which represents markup) into a text area. I also want to be able to drag this token around within the text area.

    Is that possible?

          1. Hi Hirendra,

            thanks for your help.

            It is basically like this:

            A token represents markup text {Name}. A user should be able to drag and drop this markup into an Editor field where he can also enter free text.

            Once the user has dragged and dropped that token into the editor field he can also drag the token around within the field and place it where ever he wants (even within the entered free text).

            You would save my sprint with this! :)))

          3. Yes, that is correct.

            Basically I want the ability to drag the token within the field, even within free text.

          4. Do one thing..Make selectable your token in the single click then you can place any where in the textarea by dragging.

            I will be able to provide the sample code in next 30 min..
            Send me your email-id.

  4. I want to add button instead of these value and after dragging these button some value will be drop on text area.
    can anyone help me?

Comments are closed.