All geek questions in one place

Initializing the "Sortable List of jQuery UIs" in a Predefined Order

I have a list made as sortable using jQuery UI. The first element of the list is “Item 1”, the second is “Item 2”. My requirement is that list items must be initialized based on the order stored in the arrValuesForOrder array. How do we initialize it like this?

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script> <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/sunny/jquery-ui.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(document).ready(function () { var arrValuesForOrder = ["3", "1", "4", "2"]; $("#myUnorderedList").sortable({ axis:'y', handle: '.handle', update: function () { var order = $('#myUnorderedList').sortable('serialize'); alert(order); } }); }); </script> <style> #myUnorderedList li img.handle { margin-right: 20px; cursor: move; } #myUnorderedList li { display: block; margin-bottom: 3px; height:30px; background-color: #efefef; } </style> </head> <body> <div> <ul id="myUnorderedList"> <li id="listItem_1"> <img src="images/arrow.png" alt="move" class="handle" /> <strong>Item 1</strong> </li> <li id="listItem_2"> <img src="images/arrow.png" alt="move" class="handle" /> <strong>Item 2</strong> </li> <li id="listItem_3"> <img src="images/arrow.png" alt="move" class="handle" /> <strong>Item 3</strong> </li> <li id="listItem_4"> <img src="images/arrow.png" alt="move" class="handle" /> <strong>Item 4</strong> </li> </ul> </div> </body> </html>
+6
source share
2 answers

I don’t think the sortable plugin has an option to set the initial order of elements. I think he expects the elements to be initially displayed in the correct order (which makes sense, in my opinion, why don't you do this?)

In any case, here is a piece of code that will sort the elements before initializing the sortable plugin:

 var arrValuesForOrder = ["3", "1", "4", "2"]; var $ul = $("#myUnorderedList"), $items = $("#myUnorderedList").children(); // loop backwards so you can just prepend elements in the list // instead of trying to place them at a specific position for (var i = arrValuesForOrder[arrValuesForOrder.length - 1]; i >= 0; i--) { // index is zero-based to you have to remove one from the values in your array $ul.prepend( $items.get(arrValuesForOrder[i] - 1)); } $("#myUnorderedList").sortable({ axis: 'y', handle: '.handle', update: function() { var order = $('#myUnorderedList').sortable('serialize'); alert(order); } });

Demo

+5
source

Why do you want to save your pre-order in JS? If this is hard HTML, why don't you change the HTML? And if you use a scripting language, why don't you use this for pre-ordering?

I'm not sure that sortable has triggers for moving items, but in any case, it would not be a good idea to do this after initializing your script, because the items will load as 1,2,3,4, and then rearrange to document.ready. .

+1
source

Source: https://habr.com/ru/post/908128/

More articles:


All Articles