I am trying to bring drag and drop list item with two list box having multi selection feature in both side of the list box. Is there any jquery feature to bring drag and drop using two listbox
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Member
400 Points
1293 Posts
Drag and Drop List Items (with multi selection)
Nov 30, 2020 09:38 AM|polachan|LINK
Hi
I am trying to bring drag and drop list item with two list box having multi selection feature in both side of the list box. Is there any jquery feature to bring drag and drop using two listbox
Pol
Member
730 Points
246 Posts
Re: Drag and Drop List Items (with multi selection)
Dec 01, 2020 05:44 AM|Jerry Cai|LINK
Hi,polachan
You can check this:
<style> #sortable1, #sortable2{ list-style-type: none; margin: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px; } #sortable1 li, #sortable2 li{ margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; } </style> @section Scripts { <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script> $(function () { $("#sortable1, #sortable2").sortable({ connectWith: ".connectedSortable" }).disableSelection(); }); </script> } <body> <ul id="sortable1" class="connectedSortable"> <li class="ui-state-default"><input type="checkbox" name="colors" id="red" value="red">White</input></li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li> </ul> <ul id="sortable2" class="connectedSortable"> <li class="ui-state-highlight"><input type="checkbox" name="colors" id="red" value="red">yellow</input></li> <li class="ui-state-highlight">Item 2</li> <li class="ui-state-highlight">Item 3</li> <li class="ui-state-highlight">Item 4</li> <li class="ui-state-highlight">Item 5</li> </ul> </body>And this an official link about sortable.
Result:
Best Regards,
Jerry Cai
Member
400 Points
1293 Posts
Re: Drag and Drop List Items (with multi selection)
Dec 08, 2020 01:47 PM|polachan|LINK
Many Thanks Jerry
Is it possible to give Select All button for List box items to select in your example
Member
730 Points
246 Posts
Re: Drag and Drop List Items (with multi selection)
Dec 09, 2020 02:15 AM|Jerry Cai|LINK
Hi, polachan
Yes, You can check the following:
@section Scripts { <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script> $(function () { $("#sortable1, #sortable2").sortable({ connectWith: ".connectedSortable" }).disableSelection(); }); $("#selectall1").click(function () { $("#sortable1 .checkme").prop('checked', true); }); $("#selectall2").click(function () { $("#sortable2 .checkme").prop('checked', true); }); </script> } <body> <ul id="sortable1" class="connectedSortable"> <li class="ui-state-default"><input type="checkbox" class="checkme" name="colors" id="red" value="red">White</input></li> <li class="ui-state-default"><input type="checkbox" class="checkme" name="colors" id="red" value="red">White</input></li> <li class="ui-state-default"><input type="checkbox" class="checkme" name="colors" id="red" value="red">White</input></li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li> <button id="selectall1">Select All</button> </ul> <ul id="sortable2" class="connectedSortable"> <li class="ui-state-highlight"><input type="checkbox" class="checkme" name="colors" id="red" value="red">Yellow</input></li> <li class="ui-state-highlight"><input type="checkbox" class="checkme" name="colors" id="red" value="red">Yellow</input></li> <li class="ui-state-highlight"><input type="checkbox" class="checkme" name="colors" id="red" value="red">Yellow</input></li> <li class="ui-state-highlight">Item 4</li> <li class="ui-state-highlight">Item 5</li> <button id="selectall2">Select All</button> </ul> </body>Result:
Best Regards,
Jerry Cai