Drag and Drop li elements into Textbox

From the below example you can drag a li element from a list and drop it into a textbox with comma separator.


Drag contact from the list

  • a1@test.com
  • b2@test.com
  • c3@test.com
  • d4@test.com
  • e5@test.com
  • f6@test.com
  • g7@test.com
  • h8@test.com
  • i9@test.com

Drop contact to ‘To’ list’

Source Code

<!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">
    <title>Example- drag and drop li to div</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"
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js"
    <script type="text/javascript">
        $(function() {
            $("#dragdiv li").draggable({
                appendTo: "body",
                helper: "clone",
                cursor: "move",
                revert: "invalid"
            function initDroppable($elements) {
                    activeClass: "ui-state-default",
                    hoverClass: "ui-drop-hover",
                    accept: ":not(.ui-sortable-helper)",
                    over: function(event, ui) {
                        var $this = $(this);
                    drop: function(event, ui) {
                        var $this = $(this);
                        if ($this.val() == '') {
                        } else {
                            $this.val($this.val() + "," + ui.draggable.text());
    <style type="text/css">
            border: 2px solid #bbb;
            width: 180px;
            height: 400px;
            float: left;
            width: 380px;
            height: 40px;
            float: right;
            margin-right: 10px;
        #dropdiv li
            padding-left: 10px;
            width: 580px;
            height: 300px;
            border: 2px solid #bbb;
    <div id="maindiv">
        <div id="dragdiv">
                <span>Drag contact from the list</span></h3>
            <ul id="allItems" runat="server">
                <li id="node1">a1@test.com</li>
                <li id="node2">b2@test.com</li>
                <li id="node3">c3@test.com</li>
                <li id="node4">d4@test.com</li>
                <li id="node5">e5@test.com</li>
                <li id="node6">f6@test.com</li>
                <li id="node7">g7@test.com</li>
                <li id="node8">h8@test.com</li>
                <li id="node9">i9@test.com</li>
            <span>Drop contact to 'To' list'</span></h3>
        <input id="dropdiv" type="text" style="overflow:scroll"  />