Category: jquery Demo

Swap elements when drag and drop one onto another using jQuery UI

Demo shows how to swap elements between two list using drag and drop functionality. The Example have two elements list, you can drag and drop elements from one to another. Continue reading “Swap elements when drag and drop one onto another using jQuery UI”

Drag li element and drop to td of the html table using jQuery UI

The following example shows how to perform drag and drop between li and html table. You can drag items from left-hand side and can drop to td element of the html table. Continue reading “Drag li element and drop to td of the html table using jQuery UI”

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. Continue reading “Drag and Drop li elements into Textbox”

Example – Drag and Drop li to div

Demo

Drag li elements with the mouse anywhere with in yellow section(div). In this example, you will learn how to drag and drop li elements to div using jQuery UI plugin. See the demo and source code.

Drag from here

  • Item A
  • Item B
  • Item C
  • Item D
  • Item E
  • Item F
  • Item G
  • Item H
  • Item I

Drop here

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></title>
    <style type="text/css">
        .ui-drop-hover
        {
            border: 2px solid #bbb;
        }
        #dragdiv
        {
            width: 180px;
            height: 400px;
            float: left;
        }
        #dropdiv
        {
            width: 380px;
            height: 350px;
            background-color: #F9F887;
            float: right;
            margin-right: 10px;
        }
        #dropdiv li
        {
            padding-left: 10px;
        }
        #maindiv
        {
            width: 600px;
            height: 450px;
            border: 2px solid #bbb;
        }
    </style>
    <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);
                        $("<li></li>").text(ui.draggable.text()).appendTo(this);
                        if (this.children.length > 0) {
                            return false;
                        }
 
                    }
                });
            }
        });
    </script>
</head>
<body>
    <div id="maindiv">
        <div id="dragdiv">
            <h3>
                <span>Drag from here</span></h3>
            <ul id="allItems" runat="server">
                <li id="node1">Item A</li>
                <li id="node2">Item B</li>
                <li id="node3">Item C</li>
                <li id="node4">Item D</li>
                <li id="node5">Item E</li>
                <li id="node6">Item F</li>
                <li id="node7">Item G</li>
                <li id="node8">Item H</li>
                <li id="node9">Item I</li>
            </ul>
        </div>
        <h3>
            <span>Drop here</span></h3>
        <div id="dropdiv">
        </div>
    </div>
</body>
</html>