回调在 list.js 的可拖动列表中不起作用

Question

我正在尝试使用 list.js 创建一个可拖动列表，但是当我尝试编辑、添加或删除项目时没有任何反应，我猜是回调的问题，但我找不到解决方案。

这是我的 html:

<script src="http://listjs.com/assets/javascripts/list.min.js"></script>
 <div id="contacts">
  <ul id="sortable">
<li class="id">
  <img src="http://lorempixum.com/100/100/nature/1" class="img" >
   <h3>The Grasslands</h3>
    <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
    <td class="edit"><button class="edit-item-btn">Edit</button></td>
     <td class="remove"><button class="remove-item-btn">Remove</button>     </td>
</li>

  <li class="id">
   <img src="http://lorempixum.com/100/100/nature/2" class="img" >
     <h3>Paradise Found</h3>
       <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <td class="edit"><button class="edit-item-btn">Edit</button></td>
    <td class="remove"><button class="remove-item-btn">Remove</button></td>
</li>

 <li class="id">
  <img src="http://lorempixum.com/100/100/nature/3" class="img" >
    <h3 >Smoke On The Water</h3>
     <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <td class="edit"><button class="edit-item-btn">Edit</button></td>
    <td class="remove"><button class="remove-item-btn">Remove</button></td>
</li>

<li class="id">
  <img src="http://lorempixum.com/100/100/nature/4" class="img" >
  <h3>Headline</h3>
  <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <td class="edit"><button class="edit-item-btn">Edit</button></td>
    <td class="remove"><button class="remove-item-btn">Remove</button></td>
</li>
</ul>
<table>
<td class="img">
  <input type="hidden" id="id-field" />
  <input type="text" id="img-field" placeholder="Img" />
</td>
<td class="description">
  <input type="text" id="description-field" placeholder="Description" />
</td>
<td class="add">
  <button id="add-btn">Add</button>
  <button id="edit-btn">Edit</button>
 </td>
 </table>
 </div>

这是我的 js 代码：

/*sortable */
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});

/* listjs */

var options = {
valueNames: [ 'id', 'description', 'img', ]
};

// Init list
var contactList = new Sortable('contacts', options);

var idField = $('#id-field'),
descriptionField = $('#description-field'),
imgField = $('#img-field'),
addBtn = $('#add-btn'),
editBtn = $('#edit-btn').hide(),
removeBtns = $('.remove-item-btn'),
editBtns = $('.edit-item-btn');

// Sets callbacks to the buttons in the list
refreshCallbacks();

addBtn.click(function() {
contactList.add({
id: Math.floor(Math.random()*110000),
description: descriptionField.val(),
img: imgField.val(),

});
clearFields();
refreshCallbacks();
});

editBtn.click(function() {
var item = contactList.get('id', idField.val())[0];
item.values({
id:idField.val(),
description: descriptionField.val(),
img: imgField.val(),
});
clearFields();
editBtn.hide();
addBtn.show();
});

function refreshCallbacks() {
// Needed to add new buttons to jQuery-extended object
removeBtns = $(removeBtns.selector);
editBtns = $(editBtns.selector);

removeBtns.click(function() {
var itemId = $(this).closest('li').find('.id').text();
contactList.remove('id', itemId);
});

editBtns.click(function() {
var itemId = $(this).closest('li').find('.id').text();
var itemValues = contactList.get('id', itemId)[0].values();
idField.val(itemValues.id);
descriptionField.val(itemValues.description);
imgField.val(itemValues.img);

editBtn.show();
addBtn.hide();
});
}

function clearFields() {
descriptionField.val('');
imgField.val('');

}

提前致谢

Answer 1

我没有用过listjs，所以我不知道这是否是你想要做的。我确实找到了以下内容：http://listjs.com/examples/add-get-remove/

根据那个和你的例子，我构建了这个：https://jsfiddle.net/Twisty/q7LhmaLb/6/

HTML

<div id="contacts">
  <ul id="sortable" class="list">
    <li class="id">
      <img src="https://lorempixel.com/100/100/nature/1/" class="img">
      <h3 class="title">The Grasslands</h3>
      <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
      <td class="edit">
        <button class="edit-item-btn">Edit</button>
      </td>
      <td class="remove">
        <button class="remove-item-btn">Remove</button>
      </td>
    </li>

    <li class="id">
      <img src="https://lorempixel.com/100/100/nature/2/" class="img">
      <h3 class="title">Paradise Found</h3>
      <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <td class="edit">
        <button class="edit-item-btn">Edit</button>
      </td>
      <td class="remove">
        <button class="remove-item-btn">Remove</button>
      </td>
    </li>

    <li class="id">
      <img src="https://lorempixel.com/100/100/nature/3/" class="img">
      <h3 class="title">Smoke On The Water</h3>
      <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <td class="edit">
        <button class="edit-item-btn">Edit</button>
      </td>
      <td class="remove">
        <button class="remove-item-btn">Remove</button>
      </td>
    </li>

    <li class="id">
      <img src="https://lorempixel.com/100/100/nature/4/" class="img">
      <h3 class="title">Headline</h3>
      <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <td class="edit">
        <button class="edit-item-btn">Edit</button>
      </td>
      <td class="remove">
        <button class="remove-item-btn">Remove</button>
      </td>
    </li>
  </ul>
  <table>
    <td class="img">
      <input type="hidden" id="id-field" />
      <input type="text" id="img-field" placeholder="Img" />
    </td>
    <td class="">
      <input type="text" id="title-field" placeholder="Title" />
    </td>
    <td class="description">
      <input type="text" id="description-field" placeholder="Description" />
    </td>
    <td class="add">
      <button id="add-btn">Add</button>
      <button id="edit-btn">Edit</button>
    </td>
  </table>
</div>

CSS

body {
  font-family: sans-serif;
}

.list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list li {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
}

.list li:after {
  content: "";
  display: table;
  clear: both;
}

.list .img {
  display: inline-block;
  float: left;
  margin-right: 5px;
}

.list .title {
  display: inline-block;
  padding: 0;
  margin: 0;
}

.list .description {
  font-size: 0.65em;
  padding: 0;
  margin:0;
}

JavaScript

/*sortable */
$(function() {
  $("#sortable").sortable().disableSelection();
});

/* listjs */
var options = {
  valueNames: ['id', 'title', 'description', 'img', ]
};

// Init list
var contactList = new List('contacts', options);

var idField = $('#id-field'),
  titleField = $("#titleField"),
  descriptionField = $('#description-field'),
  imgField = $('#img-field'),
  addBtn = $('#add-btn'),
  editBtn = $('#edit-btn').hide(),
  removeBtns = $('.remove-item-btn'),
  editBtns = $('.edit-item-btn'),
  sortList = $("#sortable");

// Sets callbacks to the buttons in the list
refreshCallbacks();

addBtn.click(function() {
  contactList.add({
    id: Math.floor(Math.random() * 110000),
    description: descriptionField.val(),
    img: imgField.val(),

  });
  clearFields();
  refreshCallbacks();
  sortList.sortable("refresh");
});

editBtn.click(function() {
  var item = contactList.get('id', idField.val())[0];
  item.values({
    id: idField.val(),
    description: descriptionField.val(),
    img: imgField.val(),
  });
  clearFields();
  editBtn.hide();
  addBtn.show();
});

function refreshCallbacks() {
  // Needed to add new buttons to jQuery-extended object
  removeBtns = $(removeBtns.selector);
  editBtns = $(editBtns.selector);

  removeBtns.click(function() {
    var itemId = $(this).closest('li').find('.id').text();
    contactList.remove('id', itemId);
  });

  editBtns.click(function() {
    var itemId = $(this).closest('li').find('.id').text();
    var itemValues = contactList.get('id', itemId)[0].values();
    idField.val(itemValues.id);
    descriptionField.val(itemValues.description);
    imgField.val(itemValues.img);

    editBtn.show();
    addBtn.hide();
  });
}

function clearFields() {
  descriptionField.val('');
  imgField.val('');
}

它允许您对列表进行排序和添加项目。由于项目是动态添加的，因此在添加项目时应调用 $("#sortable").sortable("refresh");。

希望对您有所帮助。

更新 1

我发现了一些小问题，并对 jQuery UI 的样式进行了更多修改。在这里玩：https://jsfiddle.net/Twisty/q7LhmaLb/11/

JavaScript

/* listjs */
var options = {
  valueNames: ['id', {
    attr: 'src',
    name: 'img'
  }, 'title', 'description']
};

// Init list
var contactList = new List('contacts', options);

var idField = $('#id-field'),
  titleField = $("#title-field"),
  descriptionField = $('#description-field'),
  imgField = $('#img-field'),
  addBtn = $('#add-btn'),
  editBtn = $('#edit-btn').hide(),
  removeBtns = $('.remove-item-btn'),
  editBtns = $('.edit-item-btn'),
  sortList = $("#sortable");

// Sets callbacks to the buttons in the list
refreshCallbacks();

addBtn.click(function() {
  contactList.add({
    id: Math.floor(Math.random() * 110000),
    title: titleField.val(),
    description: descriptionField.val(),
    img: imgField.val()
  });
  clearFields();
  refreshCallbacks();
  sortList.sortable("refresh");
});

editBtn.click(function() {
  var item = contactList.get('id', idField.val())[0];
  item.values({
    id: idField.val(),
    title: titleField.val(),
    description: descriptionField.val(),
    img: imgField.val(),
  });
  clearFields();
  editBtn.hide();
  addBtn.show();
});

function refreshCallbacks() {
  // Needed to add new buttons to jQuery-extended object
  console.log("Callback selectors: ", removeBtns.attr("class"), editBtns.attr("class"));
  removeBtns = $("." + removeBtns.attr("class"));
  editBtns = $("." + editBtns.attr("class"));

  removeBtns.click(function(e) {
    console.log(e);
    var itemId = $(this).closest('li').find('.id').text();
    contactList.remove('id', itemId);
  });

  editBtns.click(function(e) {
    console.log(e);
    var itemId = $(this).closest('li').find('.id').text();
    var itemValues = contactList.get('id', itemId)[0].values();
    idField.val(itemValues.id);
    titleField.val(itemValues.title);
    descriptionField.val(itemValues.description);
    imgField.val(itemValues.img);

    editBtn.show();
    addBtn.hide();
  });
}

function clearFields() {
  titleField.val("");
  descriptionField.val("");
  imgField.val("");
}

/*sortable */
$(function() {
  $("#sortable").sortable().disableSelection();
  $(".edit-item-btn").button({
    icon: "ui-icon-comment",
    showLabel: false
  });
  $(".remove-item-btn").button({
    icon: "ui-icon-close",
    showLabel: false
  });
  $(".buttons").controlgroup();
  $('#search-field').on('keyup', function() {
    var searchString = $(this).val();
    contactList.search(searchString);
  });
});

我做了很多小事，如你所见，其中一项是修复 .selector 的使用。我切换到 .attr("class") 以获取 class 名称并将其用作 class 选择器。这是有效的，因为该元素仅定义了 1 class。可能会四处寻找，看看是否有更好的解决方案。

这在 refreshCallbacks() 中使用如下：

// Needed to add new buttons to jQuery-extended object
removeBtns = $("." + removeBtns.attr("class"));
editBtns = $("." + editBtns.attr("class"));

此函数只是将所有元素（如果创建了任何新元素）重新分配给变量。这解决了 "Edit" 和 "Remove" 按钮的问题。我注意到编辑没有捕获图像源 url。我在这里发现：http://listjs.com/examples/data-attributes-custom-attributes/ 所以要在您的项目中修复它，我们这样做：

var options = {
  valueNames: ['id', {
    attr: 'src',
    name: 'img'
  }, 'title', 'description']
};

我认为这对你有好处。

更新 2

我说得太早了。

https://jsfiddle.net/Twisty/q7LhmaLb/12/

id 未被阅读，因此编辑总是会调出第一项。通过使用 data-id 属性更新 li 修复。我必须进去修理一些 jQuery 才能与此对齐。

更新 3

发现另一个add，排序的时候顺序变了。发生这种情况时，列表索引需要更新。简单修复：

$("#sortable").sortable({
  update: function(e, ui) {
    contactList.reIndex();
  }
}).disableSelection();

示例：https://jsfiddle.net/Twisty/q7LhmaLb/18/

回调在 list.js 的可拖动列表中不起作用

callback not working in a draggable list with list.js

javascript

jquery

jquery-ui

jquery-ui-draggable

list.js