You can see the additional work in drag and drop functionality, When user will drop the element in the last row of the table, then new row will be inserted automatically. Continue reading “Create new row in the table after dropping an element using jquery ui”
Tag: Drag and drop operation
Highlight a droppable area on hover using jquery ui
The example contains multiple droppable div elements. You can drag items from the list and can drop to any of these div. When you are dragging an element and it is hovered over a droppable div then that div will highlighted. Continue reading “Highlight a droppable area on hover using jquery ui”
Remove dragged item after dropping using JQuery UI
The demo shows the basic functionality of drag and drop using JQuery. After dropping, dragged item will be removed from the dragged list. Continue reading “Remove dragged item after dropping using JQuery UI”
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”
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 two treeview using vb.net
The following example demonstrates how to perform a drag and drop operation with tree nodes between two TreeView controls in vb.net
Continue reading “Drag and drop operation between two treeview using vb.net”
Drag and drop operation between two Listbox using vb.net
The following example demonstrates how to perform a drag and drop operation between two listbox controls in vb.net
Continue reading “Drag and drop operation between two Listbox using vb.net”
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