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.

Demo

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">
<head>
    <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"
        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>
 
    <script type="text/javascript">
        $(function() {
            $("#dragdiv li").draggable({
                appendTo: "body",
                helper: "clone",
                cursor: "move",
                revert: "invalid"
            });
 
            initDroppable($("#dropdiv"));
            function initDroppable($elements) {
                $elements.droppable({
                    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() == '') {
                            $this.val(ui.draggable.text());
                        } else {
                            $this.val($this.val() + "," + ui.draggable.text());
                        }
                    }
                });
            }
        });
    </script>
 
    <style type="text/css">
        .ui-drop-hover
        {
            border: 2px solid #bbb;
        }
        #dragdiv
        {
            width: 180px;
            height: 400px;
            float: left;
        }
        #dropdiv
        {
            width: 380px;
            height: 40px;
            float: right;
            margin-right: 10px;
        }
        #dropdiv li
        {
            padding-left: 10px;
        }
        #maindiv
        {
            width: 580px;
            height: 300px;
            border: 2px solid #bbb;
        }
    </style>
</head>
<body>
    <div id="maindiv">
        <div id="dragdiv">
            <h3>
                <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>
            </ul>
        </div>
        <h3>
            <span>Drop contact to 'To' list'</span></h3>
        <input id="dropdiv" type="text" style="overflow:scroll"  />
        </div>
</body>
</html>