asked on

JQuery Multisortable.. does not work on multi selected Divs.. Fix or Different Drag and Drop

Having issues with JQuery multisortable.

Hey everyone.. Been using multisortable for this year and just not happy with it.

It has some update issues on the multiselect.

And when you try to resort multiple DIVs within the same DIV list the additional DIVs are always ignored. It does not catch them.

I have put a mock up together in the code section. Left to Right divs... seems to work ok.. although the order of updates are a bit odd. But I can live with that as it works for me.

<html>
    <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script> 
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
    <script src="media/js/ms/src/jquery.multisortable.js"></script>
    </script>
    </head>
    <style>
        #pagewrapper {
            display: flex;
        }
        #left {
            width: 50%;
            border: 1px solid red;
        }        
        #right {
            width: 50%;
            border: 1px solid green;
        }     
        .selected {
            border: 5px solid pink;
        }                     
    </style>
<body>
<h1>Test<h1>
<div id="pagewrapper">
    LEFT div
    <div id="left" class="connectedSortable" data-hid="left">
        <div id="1" class="box" data-index="1" data-position="1">My div 1</div>
        <div id="2" class="box" data-index="2" data-position="2">My div 2</div>
        <div id="3" class="box" data-index="3" data-position="3">My div 3</div>
        <div id="4" class="box" data-index="4" data-position="4">My div 4</div>
        <div id="5" class="box" data-index="5" data-position="5">My div 5</div>
        <div id="6" class="box" data-index="6" data-position="6">My div 6</div>
    </div>
    RIGHT div
    <div id="Right" class="connectedSortable" data-hid="right">
    </div>
</div>

</body>
<script>
$('#pagewrapper').ready(function() {    
});
$('#pagewrapper').on('click', '.box', function MyDragnDrop() {
    $( ".connectedSortable" ).multisortable({items: "div.box", connectWith: ".connectedSortable",selectedClass:"selected", 
         update: function(event) {
        console.log("event: "+event.target.id);
                        $(this).children().each(function (index) {                            
                            var myindexdata = $(this).attr('data-index');
                            parentdiv = $(this).parent().attr('data-hid');
                            index = index+1;
                                    $(this).attr('data-position', (index)).addClass('updated');
                                   console.log("My Div: "+myindexdata+ " Index: "+index+ " data-position: "+$(this).attr('data-position')+ " parentdiv: " + parentdiv);
                        });
                        //   Run my AJAX function with an array I build from the above just catching the changes etc...
                   
                }
    });
});
</script>

</html>

Open in new window

HOWEVER, when you resort a multiselected group of DIVs within the same it never registers the additional selected DIVs and therefore I do not get my AJAX fired to update their positions which of course I need.

On the Left div just try moving 3 and 4 to the end for example. You will see the 3 Div gets registered but 4 is ignored so the event never occurs that I can catch and then fire to Ajax so my list is always wrong.

a) Any ideas on how to FIX the multisortable?

b) Different framework with same ability easy to implement into my existing projects which is maybe more popular?

Many thanks in advance