回調不工作在一個可拖動列表與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/