Select index Array with Drag & Drop

Question

Good Day, I have this HTML:

<ul class="sortable-list" style="list-style-type: none;"></ul>

and this Javascript:

$(document).ready(function() {

  var old, manip;

  function Person(id, first, last, age, eyecolor) {
    this.id = id;
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
  }

  Person.prototype.display = function() {
    sortableList.push(this);

    $(".sortable-list").sortable({
      axis: "y",
      containment: ".sortable-list",
      revert: true,

      start: function(event, ui) {
        var updt = ui.item.index();
        manip = updt;
        old = sortableList[manip];
      },

      update: function(event, ui) {
        var newIndex = ui.item.index();
        sortableList.splice(manip, 1);
        sortableList.splice(newIndex, 0, old);
      }

    });

    var moveMe = "<i class='fa fa-arrows-v' aria-hidden='true' style='border:1px solid black;padding:5px;background-color:#91DAF2;'></i>";
    var seeDetails = "<i class='fa fa-eye' aria-hidden='true' style='border:1px solid black;padding:5px;background-color:#F5940C;' onclick='seeDetails(" + this.id + ");'></i>";

    var fNameObj = "<input type='text' value=" + this.firstName + " size='7' style='font-size:13px;' disabled=true>";
    var lNameObj = "<input type='text' value=" + this.lastName + " size='7' style='font-size:13px;' disabled=true>";
    var ageObj = "<input type='text' value=" + this.age + " size='3' style='font-size:13px;' disabled=true>";

    var output = "<li>" + moveMe + " " + seeDetails + " " + fNameObj + " " + lNameObj + " " + ageObj + "</li>";

    $(".sortable-list").append(output);
  };

  var me = new Person(1, "John", "Doe", 22, "blue");
  me.display();

  var you = new Person(2, "Jane", "Smith", 33, "green");
  you.display();

  var him = new Person(3, "Mike", "Jones", 44, "brown");
  him.display();

  var her = new Person(4, "Gill", "Greer", 55, "green");
  her.display();

  var us = new Person(5, "Paul", "Mall", 66, "blue");
  us.display();

});



var sortableList = [];

function seeDetails(index) {
  var temp = sortableList[index - 1];
  alert(temp.firstName + " " + temp.lastName + " has " + temp.eyeColor + " eyes.");
  console.log(sortableList);
}

I use FontAwesome to display the icons for the buttons. What I try to do is to display the content of the object by passing the id to the function seeDetails. I'd like to keep track of the elements order, because I'll use it further in my code. Is there any way to use that code to display the proper content of the object, after drag&drop ? Anybody can help ? Thanks! JSFIDDLE

Answer 1

Sortable has 2 methods that may help: serialize and toArray

serialize

Serializes the sortable's item ids into a form/ajax submittable string. Calling this method produces a hash that can be appended to any url to easily submit a new item order back to the server.

It works by default by looking at the id of each item in the format "setname_number", and it spits out a hash like "setname[]=number&setname[]=number".

See more: http://api.jqueryui.com/sortable/#method-serialize

toArray

Serializes the sortable's item id's into an array of string.

See More: http://api.jqueryui.com/sortable/#method-toArray

Depending on how you want to use the order later, one of these methods will help you. I suspect you will want to pass this data into a variable in update or stop callback.

To ensure these work better, you would want to add an id attribute to opit list items. For example:

var output = "<li id='person-" + this.id + "'>" + moveMe + " " + seeDetails + " " + fNameObj + " " + lNameObj + " " + ageObj + "</li>";

What I noticed is that we're passing back an index to seeDetails(), when you can also pass back the id for that person. Consider this:

function seeDetails(i) {
  var temp;
  $.each(sortableList, function(k, p) {
    if (p.id == i) {
      temp = p;
    }
  });
  console.log(temp.firstName, temp.lastName, "has", temp.eyeColor, "eyes.");
}

Putting it all together, here is what I would advise: https://jsfiddle.net/Twisty/Lyotc8d5/

JavaScript

$(document).ready(function() {

  var old, manip;

  function Person(id, first, last, age, eyecolor) {
    this.id = id;
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
  }

  Person.prototype.display = function() {
    sortableList.push(this);

    var that = this;

    $(".sortable-list").sortable({
      axis: "y",
      containment: ".sortable-list",
      revert: true,
      start: function(event, ui) {
        var updt = ui.item.index();
        manip = updt;
        old = sortableList[manip];
      },
      update: function(event, ui) {
        var newIndex = ui.item.index();
        sortableList.splice(manip, 1);
        sortableList.splice(newIndex, 0, old);
      }
    });

    var moveMe = $("<i>", {
      class: 'fa fa-arrows-v',
      "aria-hidden": true,
      style: 'border:1px solid black;padding:5px;background-color:#91DAF2;'
    });

    var detailsBtn = $("<i>", {
      class: 'fa fa-eye',
      "aria-hidden": true,
      style: 'border:1px solid black;padding:5px;background-color:#F5940C;'
    }).click(function(e) {
      seeDetails(that.id);
    });

    var fNameObj = $("<input>", {
      type: 'text',
      value: that.firstName,
      size: 7,
      style: 'font-size:13px;',
      disabled: true
    });

    var lNameObj = $("<input>", {
      type: 'text',
      value: that.lastName,
      size: 7,
      style: 'font-size:13px;',
      disabled: true
    });

    var ageObj = $("<input>", {
      type: 'text',
      value: this.age,
      size: 3,
      style: 'font-size:13px;',
      disabled: true
    });

    var output = $("<li>", {
      id: 'person-' + that.id
    });

    output.append(moveMe, detailsBtn, fNameObj, lNameObj, ageObj);
    $(".sortable-list").append(output);
  };

  var me = new Person(1, "John", "Doe", 22, "blue");
  me.display();

  var you = new Person(2, "Jane", "Smith", 33, "green");
  you.display();

  var him = new Person(3, "Mike", "Jones", 44, "brown");
  him.display();

  var her = new Person(4, "Gill", "Greer", 55, "green");
  her.display();

  var us = new Person(5, "Paul", "Mall", 66, "blue");
  us.display();
});

var sortableList = [];

function seeDetails(i) {
  var temp;
  $.each(sortableList, function(k, p) {
    if (p.id == i) {
      temp = p;
    }
  });
  console.log(temp.firstName, temp.lastName, "has", temp.eyeColor, "eyes.");
}

A few small updates. Not that your code was wrong or incorrect, I just like creating the jQuery objects and find them easier to work with. Assigning this to variable that is helpful to ensure there is no confusion around this in other functions, like for click callback.