Javascript 使用拖放选择索引数组（&A）；滴

你好，我有这个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);
}

$（文档）.ready（函数（）{
var old，manip；
职能人员（身份证、第一名、最后一名、年龄、眼睛颜色）{
this.id=id；
this.firstName=first；
this.lastName=last；
这个。年龄=年龄；
this.eyeColor=eyeColor；
}
Person.prototype.display=函数（）{
可排序列表。推送（此）；
$（“.sortable列表”）.sortable({
轴：“y”，
包含：“.可排序列表”，
回复：对，
开始：功能（事件、用户界面）{
var updt=ui.item.index（）；
manip=updt；
old=可排序列表[manip]；
},
更新：功能（事件、用户界面）{
var newIndex=ui.item.index（）；
可分类列表。拼接（manip，1）；
可排序列表拼接（newIndex，0，old）；
}
});
var moveMe=“”；
var seeDetails=“”；
var fNameObj=“”；
var lNameObj=“”；
var ageObj=“”；
var output=“
”+moveMe+“”+seeDetails+“”+fNameObj+“”+lNameObj+“”+ageObj+”
”；
$（“.sortable list”）.append（输出）；
};
var me=新人（1，“约翰”，“多伊”，22，“蓝色”）；
me.display（）；
var you=新人（2，“简”，“史密斯”，33，“格林”）；
you.display（）；
var him=新人（3，“迈克”，“琼斯”，44，“布朗”）；
他；
var her=新人（4，“吉尔”，“格里尔”，55，“绿色”）；
她的展示；
var us=新人（5，“保罗”，“商场”，66，“蓝色”）；
美国显示（）；
});
var-sortableList=[]；
功能种子细节（索引）{
var temp=可排序列表[索引-1]；
警报（temp.firstName+“”+temp.lastName+“具有”+temp.eyeColor+“眼睛”）；
console.log（可排序列表）；
}

我使用Fontsome来显示按钮的图标。 我试图通过将id传递给函数

seedDetails

来显示对象的内容。 我希望跟踪元素顺序，因为我将在代码中进一步使用它。 在拖放之后，是否有任何方法可以使用该代码显示对象的正确内容？有人能帮忙吗？谢谢

---

Sortable有两种可能有用的方法：

序列化

和

toArray

序列化

将可排序的项

id

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

默认情况下，它通过查看格式为“setname\u number”的每个项目的

id

，并输出类似于

“setname[]=number&setname[]=number”

的散列

请参阅更多：

toArray

将可排序的项id序列化为字符串数组

请参阅更多：

根据您以后希望如何使用订单，以下方法之一将对您有所帮助。我怀疑您希望将此数据传递到

update

或

stop

回调中的变量中

为了确保这些更好地工作，您需要向opit列表项添加一个

id

属性。例如：

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

综上所述，以下是我的建议：

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

$（文档）.ready（函数（）{
var old，manip；
职能人员（身份证、第一名、最后一名、年龄、眼睛颜色）{
this.id=id；
this.firstName=first；
this.lastName=last；
这个。年龄=年龄；
this.eyeColor=eyeColor；
}
Person.prototype.display=函数（）{
可排序列表。推送（此）；
var=这个；
$（“.sortable列表”）.sortable({
轴：“y”，
包含：“.可排序列表”，
回复：对，
开始：功能（事件、用户界面）{
var updt=ui.item.index（）；
manip=updt；
old=可排序列表[manip]；
},
更新：功能（事件、用户界面）{
var newIndex=ui.item.index（）；
可分类列表。拼接（manip，1）；
可排序列表拼接（newIndex，0，old）；
}
});
var moveMe=$（“”{
类别：“fa-arrows-v”，
“隐藏的咏叹调”：没错，
样式：“边框：1px纯黑色；填充：5px；背景色：#91DAF2；”
});
var detailsBtn=$（“”{
班级：'发发眼'，
“隐藏的咏叹调”：没错，
样式：“边框：1px纯黑色；填充：5px；背景色：#F5940C；”
})。单击（功能（e）{
种子标本（即.id）；
});
var fNameObj=$（“”{
键入：“文本”，
value:that.firstName，
尺码：7，
样式：“字体大小：13px；”，
残疾人士：对
});
变量lNameObj=$（“”{
键入：“文本”，
value:that.lastName，
尺码：7，
样式：“字体大小：13px；”，
残疾人士：对
});
var ageObj=$（“”{
键入：“文本”，
价值观：这个年龄，
尺寸：3，
样式：“字体大小：13px；”，
残疾人士：对
});
变量输出=$（“
”{
id:'person-'+that.id
});
append（moveMe、detailsBtn、fNameObj、lNameObj、ageObj）；
$（“.sortable list”）.append（输出）；
};
var me=新人（1，“约翰”，“多伊”，22，“蓝色”）；
me.display（）；
var you=新人（2，“简”，“史密斯”，33，“格林”）；
you.display（）；
var him=新人（3，“迈克”，“琼斯”，44，“布朗”）；
他；
var her=新人（4，“吉尔”，“格里尔”，55，“绿色”）；
她的展示；
var us=新人（5，“保罗”，“商场”，66，“蓝色”）；
美国显示（）；
});
var-sortableList=[]；
功能详情（一）{
无功温度；
$.each（可排序列表，函数（k，p）{
如果（p.id==i）{
温度=p；
}
});
log（temp.firstName，temp.lastName，“has”，temp.eyeColor，“eyes.”）；
}

---

一些小的更新。并不是说您的代码错误或不正确，我只是喜欢创建jQuery对象，并发现它们更易于使用。将

this

分配给变量

that

有助于确保在其他函数中，如

单击
回调时，不会混淆
this
。
任何人都可以提供帮助：（需要更多信息吗？
$(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.");
}