I have populated a listbox with a number of items. I want to allow the user to select items either multiple or single and drag them to different baskets on screen. I then want to obtain the basket details for later processing.
So how can I implement drag and drop from the listbox to another area of the screen?
billcrawley
Member
341 Points
286 Posts
Jquery Drag and Drop
Jan 18, 2011 02:13 PM|LINK
Hi All,
I have populated a listbox with a number of items. I want to allow the user to select items either multiple or single and drag them to different baskets on screen. I then want to obtain the basket details for later processing.
So how can I implement drag and drop from the listbox to another area of the screen?
tehremo
Star
10540 Points
1704 Posts
Re: Jquery Drag and Drop
Jan 18, 2011 03:25 PM|LINK
Yes, take a look at jQuery Connect Lists: http://jqueryui.com/demos/sortable/#connect-lists
billcrawley
Member
341 Points
286 Posts
Re: Jquery Drag and Drop
Jan 18, 2011 03:36 PM|LINK
This looks as though this is what I need. How do I get the code for this?
tehremo
Star
10540 Points
1704 Posts
Re: Jquery Drag and Drop
Jan 18, 2011 03:41 PM|LINK
There is a View Source link right below the example. You can download jQuery UI from that site as well.
asteranup
All-Star
30184 Points
4906 Posts
Re: Jquery Drag and Drop
Jan 19, 2011 07:44 AM|LINK
Hi,
See the following source-
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <style type="text/css"> ul { float: left; width: 105px; background: silver; padding: 10px; color: Black; margin: 10px; } ul li { padding: 5px; margin: 5px; background-color: white; cursor: pointer; } </style> <script> $(document).ready(function() { var source; var destination; var fn = function(event, ui) { $("#droppable").append($(ui.draggable[0]).removeAttr("style")); }; var fn1 = function(event, ui) { $("#draggable").append($(ui.draggable[0]).removeAttr("style")); }; $("#draggable li").draggable(); $("#droppable").droppable({ drop: fn }); $("#droppable li").draggable(); $("#draggable").droppable({ drop: fn1 }); $("#basket").click(function() { var textArray = $.map($("#droppable li"), function(item) { return $(item).text(); }); }); }); </script> </head> <body style="font-size: 62.5%;"> <ul id="draggable"> <li>hi 1</li> <li>hi 2</li> <li>hi 3</li> <li>hi 4</li> <li>hi 5</li> <li>hi 6</li> <li>hi 7</li> <li>hi 8</li> <li>hi 9</li> </ul> <ul id="droppable"> </ul> <br /> <input id="basket" type="button" value="get baskets Values" /> </body> </html>Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
asteranup
All-Star
30184 Points
4906 Posts
Re: Jquery Drag and Drop
Jan 19, 2011 09:17 AM|LINK
Hi,
The following code shows how to use multiple busket for dropping-
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <style type="text/css"> ul { float: left; width: 105px; background: silver; padding: 10px; color: Black; margin: 10px; } ul li { padding: 5px; margin: 5px; background-color: white; cursor: pointer; } </style> <script> $(document).ready(function() { var fn = function(event, ui) { $(this).append($(ui.draggable[0]).removeAttr("style")); }; $(".dragDrop li").draggable(); $(".dragDrop").droppable({ drop: fn }); $("#basket").click(function() { var textArray = $.map($("#droppable li"), function(item) { return $(item).text(); }); }); }); </script> </head> <body style="font-size: 62.5%;"> <ul class="dragDrop" > <li>hi 1</li> <li>hi 2</li> <li>hi 3</li> <li>hi 4</li> <li>hi 5</li> <li>hi 6</li> <li>hi 7</li> <li>hi 8</li> <li>hi 9</li> </ul> <ul class="dragDrop" id="droppable"> </ul> <ul class="dragDrop"> </ul> <br /> <input id="basket" type="button" value="get baskets Values" /> </body> </html>Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
Sammy71
Member
18 Points
19 Posts
Re: Jquery Drag and Drop
Jul 23, 2012 03:35 PM|LINK
Anup,
Can I do something simillar with listbox control?
asteranup
All-Star
30184 Points
4906 Posts
Re: Jquery Drag and Drop
Jul 27, 2012 09:40 AM|LINK
Hi,
I dont think this is possible. You should change your design. As List box gets rendered to select with multiple.
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog