Tag Archives: Drag and drop operation

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>

Simple illustration of drag and drop Events in vb.net

 
The following example demonstrates how to perform a drag and drop operation between Listbox and Textbox controls in vb.net

this example requires one windows form that contains one listbox controls named ListBox1 and one textbox named TextBox1, Use the toolbox to add these controls to Form1. Change the AllowDrop property of both ListBox1 and TextBox1 to True in the Properties window.

Generate method handler for Load event of Form1 and use this code for binding items to ListBox1 :

Private Sub Listbox1_Mousedown(ByVal Sender As Object, _
                                       ByVal e As System.Windows.Forms.MouseEventArgs) Handles Listbox1.Mousedown
            Dim Selecteditems As String
            For i As Integer = 0 To Listbox1.Selecteditems.Count - 1
                Selecteditems = Selecteditems & "," & Listbox1.Selecteditems.Item(i)
            Next
            Listbox1.Dodragdrop(Selecteditems, DragDropEffects.Copy Or DragDropEffects.Move)
End Sub
     Private Sub TextBox1_DragEnter(ByVal sender As System.Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles TextBox1.DragEnter
            e.Effect = DragDropEffects.Copy
    End Sub
 
    Private Sub TextBox1_DragDrop(ByVal sender As System.Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles TextBox1.DragDrop
            TextBox1.Text = e.Data.GetData(DataFormats.Text).ToString
    End Sub

Drag and drop operation between Labels in vb.net

 
This example shows drag and drop operation between Labels in vb.net.

    Private Sub Label1_MouseDown(ByVal sender As System.Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Label1.MouseDown
        If e.Button = MouseButtons.Left Then
            Label1.DoDragDrop(Label1.Text, DragDropEffects.Copy Or DragDropEffects.Move)
        End If
    End Sub
 
    Private Sub Label2_DragEnter(ByVal sender As System.Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles Label2.DragEnter
        e.Effect = DragDropEffects.Copy
    End Sub
 
    Private Sub Label2_DragDrop(ByVal sender As System.Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles Label2.DragDrop
        Label2.Text = e.Data.GetData(DataFormats.Text).ToString
    End Sub