locked
Drag and Drop List Items (with multi selection) RRS feed

  • Question

  • User-1355965324 posted

    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

    Monday, November 30, 2020 9:38 AM

Answers

  • User1312693872 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 1, 2020 5:44 AM

All replies

  • User1312693872 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 1, 2020 5:44 AM
  • User-1355965324 posted

    Many Thanks Jerry

    Is it possible to give Select All button for List box items to select in your example

    Tuesday, December 8, 2020 1:47 PM
  • User1312693872 posted

    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

    Wednesday, December 9, 2020 2:15 AM