jQuery demo

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

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
 
    <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>
 
</head>
<body>
    <form id="form1" runat="server">
    <div id="content">
        <h2 id="hpermittext" style="line-height: 120%;">
            Demo - Create E-mail Template(using drag and drop)</h2>
        <div class="dragitems">
            <h3>
                <span>Available Fields</span></h3>
            <ul id="allfields" runat="server">
                <li id="node1">Name</li>
                <li id="node2">Address</li>
                <li id="node3">Phone</li>
                <li id="node4">Sender Name</li>
                <li id="node5">Sender Address</li>
                <li id="node6">Sender Phone</li>
                <li id="node7">Sender Email</li>
                <li id="node8">Other1</li>
                <li id="node9">Other2</li>
                <li id="node10">Other3</li>
                <li id="node11">Other4</li>
                <li id="node12">Other5</li>
            </ul>
        </div>
        <div class="dropitems">
            <span>Subject: </span>
            <input id="txtSubject" runat="server" maxlength="250" 
            style="width: 200px" type="text" /><a href=""> Read HTML5 Canvas Tutorial</a>
            <textarea id="TextArea1" cols="50" name="S1" 
            rows="20">Hello HTMl5 canvas Tutorials on Authorcode </textarea>
        </div>
    </div>
    </form>
</body>
</html>
  • Federico Fernandez

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

    • Hi

      please describe me about what are you doing(in brief)?. i will help you and if possible i’ll publish the sample code for your problem.

  • Seb

    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?

    • yes it is possible..

      • Seb

        How?
        😉

        Thanks for your help.

        • Send me your sample token structure which you need to drag and drop to textarea..I will provide you the sample code.

          • Seb

            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! :)))

          • Means you want to drag and place the the token within the Editor field…

          • Seb

            Yes, that is correct.

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

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

          • This code will select the token in editor on single click, then you can drag and drop anywhere in text area: http://www.authorcode.com/make-full-select-the-text-on-the-single-click-in-text-area/

  • Larry Liberto

    How can I have 2 separate text areas that can be used as drop areas?

  • arpit

    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?