Build JQuery UI Sortable from array data

Question

I was trying to figure out how I can pass my custom array to JQuery UI sortable widget so I can have the HTML elements created by some logic and not hardcode it but I cannot seem to find anything. For getting the data back I found a toArray method but that seems to be getting an empty array. Below is my code.

<div class="demo">
    <ul id="sortable">

    </ul>    
</div>

$("#sortable").sortable({   
});
$("#sortable").disableSelection();    
var data = [];    
function GetData()
{
   for (i = 0; i < 10; i++)
   {
      data.push(new CustomObject(i,i));   
   }
}    
var CustomObject = function(name,id)
{
   this.name = name;
   this.id = id;    
}

What I want to do is create the sortable data using data array so id becomes the id and name become the display part. And then on some save button I want to retrieve the sorted array. Can someone please tell me how to achieve this.

Here is the Fiddle Link

Thanks

I was able to figure it following the logic from this post stackoverflow.com/questions/41475378/… — SP1
– SP1, Commented Jul 31, 2018 at 23:03
If my answer helped you, please accept and give upvote it to help other programmers for finding a solution when they have same issue. The majority of programmers see accepted or upvoted answer. — Ali Soltani
– Ali Soltani, Commented Aug 12, 2018 at 4:11

Ali Soltani · Accepted Answer · 2018-08-01 12:27:59Z

0

You can do it like below:

for (var item of data) {
  // Create new li
  let li = $(document.createElement("li"))
    .text(item.name) // Set text by name of item
    .attr("id", item.id); // Set id by id of item 

  // Append li to ul  
  $("#sortable").append(li);
}

Online demo (jsFiddle)

answered Aug 1, 2018 at 12:27

Ali Soltani

10k5 gold badges33 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nicolastorre · Accepted Answer · 2018-08-01 13:27:19Z

To retrieve the sorted array you can use the method .sortable( "toArray") like this:

  $(function() {
  
	  function getData()
    {
    	var data = [];
       for (i = 0; i < 10; i++)
       {
          data.push(new CustomObject(i,i));   
       }
       return data;
    }
    
    var CustomObject = function(name,id)
    {
       this.name = name;
       this.id = id;    
    }
    
		$.each(getData(), function(i, item){
    	$('#sortable').append('<li data-id="' + item.id + '" class="ui-state-default">' + item.name + '</li>');
		});
    
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
    
    $("#save").on('click', function() {
    	var sortedIDs = $( "#sortable" ).sortable( "toArray", {"attribute": "data-id"});
      console.log(sortedIDs);
    });
  });

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }

<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="demo">
  <ul id="sortable"></ul>
  <button id="save">Save</button>
</div>

Collectives™ on Stack Overflow

Build JQuery UI Sortable from array data

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related