回调不工作在一个可拖动列表与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")获取类名称并将其用作类选择器。由于该元素只定义了1个类，因此这是有效的。可能会寻找是否有更好的解决方案。

这在refreshCallbacks()使用像这样：

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

该函数只是重新分配所有的元素（在创建任何新的情况下）回变量。这解决了“编辑”和“删除”按钮的问题。我注意到编辑没有捕获图像源网址。我发现，这里：http://listjs.com/examples/data-attributes-custom-attributes/那么解决它在你的项目中，我们做到：

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

，我认为会做你。

更新2

我太早说话。

​​

的id没有被阅读，所以编辑总是拉起的第一个项目。通过使用data-id属性更新li来修复。我不得不进入并修复一些jQuery来排队。

更新3

实测另一添加，排序时，顺序改变。发生这种情况时，需要更新列表索引。简单的修正：

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

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