Question

美好的一天，我有这个HTML：

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

和这个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);
}

我使用FontAwesome显示按钮的图标。我尝试做的是通过将id传递给函数seeDetails来显示对象的内容。我想跟踪元素顺序，因为我会在代码中进一步使用它。拖放后有没有办法使用该代码显示对象的正确内容？有人可以帮忙吗？谢谢！ JSFIDDLE

Answer 1

Sortable有两种可能有用的方法：serialize和toArray

<强>序列化

将可排序项id序列化为表单/ ajax可提交字符串。调用此方法会生成一个哈希值，该哈希值可以附加到任何URL，以便轻松地将新的项目顺序提交回服务器。

默认情况下，通过查看格式为id的每个项目的"setname_number"，它会发出类似"setname[]=number&setname[]=number"的哈希值。

查看更多：http://api.jqueryui.com/sortable/#method-serialize

<强>指定者

将sortable的item id序列化为一个字符串数组。

查看更多：http://api.jqueryui.com/sortable/#method-toArray

根据您以后如何使用订单，其中一种方法可以为您提供帮助。我怀疑您希望将此数据传递到update或stop回调中的变量。

为确保更好地完成这些工作，您需要为opit列表项添加id属性。例如：

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

我注意到的是，我们将索引传递回seeDetails()，当您还可以为该人传回id时。考虑一下：

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.");
}

总而言之，我建议：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.");
}

一些小的更新。并不是说您的代码错误或不正确，我只是想创建jQuery对象并发现它们更容易使用。将this分配给变量that有助于确保this在其他功能中不会出现混淆，例如click回调。

选择索引数组与拖放＆amp;下降

1 个答案: