最近，因為公司的一個新項目，用了一個基於bootstrap二次改造的國外友人的框架。感覺很一般吧，要求更換框架，客戶拒絕。只能搞這個，發現裡面一個jQuery插件-【Nestable】但是源作者長時間不更新，後來發現了一個新版本，應該是另外一個人基於Nestable改造的，稱之為“Nestable2 ...
最近，因為公司的一個新項目，用了一個基於bootstrap二次改造的國外友人的框架。感覺很一般吧，要求更換框架，客戶拒絕。只能搞這個，發現裡面一個jQuery插件-【Nestable】但是源作者長時間不更新，後來發現了一個新版本，應該是另外一個人基於Nestable改造的，稱之為“Nestable2”，所以也就花了一些時間研究了一下，使用百度找的資料都很淺薄，所以這裡做一個彙總，也希望更多的人少走彎路吧。雖然說這個插件用的人不多。
項目地址
疑難點彙總
1.Nestable 初始化摺疊
在Nestable 2中，初始化摺疊跟Nestable 原始版本中一致，但是百度搜索的結果很少，我覺得應該是這個插件很少人用吧，因為比這個好看的插件多了去。
// 展開指定記憶體塊中的元素
$(selector).nestable('expandAll');
// 收合指定記憶體塊中的元素
$(selector).nestable('collapseAll');
2.Nestable 禁止拖動
禁止拖動在Nestable原始版本中是沒有這一功能的，因為這個插件就是可拖拽的，拖拽完成後，把數據再傳遞給後臺進行修改。這個我找了很久都沒有一個好點的解決方案，在CSDN上博主說，直接刪除插件底層代碼就可以實現，但是怕有問題，所以找到新的插件，也就是版本2。來看代碼。
$('selector').nestable({
'onDragStart': function (l, e) {
return false;
}
});
這個地方，如果把 return false刪除，就可以寫用戶拖動元素時，觸發作為選項提供的回調函數。l是主容器，e是已移動的。需要這個功能的，可以查看GitHub上的介紹。
3.Nestable 點擊事件
這個是我在平安夜當晚研究到11多，都沒解決的問題，今天偶然性發現了問題，原因是JS的事件冒泡造成的，同時，非常感謝Google的幫助哈。
Nestable 2比原版更加擴展，直接使用JSON數據渲染到頁面上，但是沒有額外的點擊事件，這就需要自己操作了，所以就用類作為點擊。
$('.dd-item').click(function () {
var id = $(this).data('id');
alert(id);
});
但是這個地方出問題了。點擊第一級數據正常，第二級數據後，獲取到了兩個id，一個是父級id，一個是點擊的id，再繼續測試，三級的話，會彈出三個數據。經過百度的一段探索後，發現可以使用jQuery 事件one()方法,但是只能點擊一次，第二次點擊就無法使用了，這不是一個有效的方法。
然後再者就是使用防止冒泡的方法：前端博客
w3c的方法是e.stopPropagation()，IE則是使用e.cancelBubble = true
試了試，沒有效果。那就拼接html，單獨給li標簽寫一個onclick方法依舊是原本的小bug。
分析了一下渲染的界面。發現生成的裡面嵌套了一個div，如果給這個div加一個點擊事件，會不會能夠實現單擊的效果呢？
$('.dd-handle').click(function () {
var p = $(this).parent();
var id = p.data('id')
alert(id);
});
果然，這個驗證了我的猜想，給渲染的子級元素點擊事件，找到父級ID就不會出現冒泡問題了。哈哈完美解決。
總結
Nestable2基於Nestable一個升級版，添加了很多功能，雖然去年不再更新，但是這個插件依舊很強大。希望這個文檔能夠給一些帶來一點幫助吧。
本文首發於：https://qsh5.cn/post-70.html
