GetUIKit3 - 如何删除/添加元素到可排序的？答案

【问题标题】：GetUIKit3 - How to remove / add element to sortable?GetUIKit3 - 如何删除/添加元素到可排序的？
【发布时间】：2018-12-23 10:47:00
【问题描述】：

两个问题：我想向 GetUIKit3 Sortable 添加一个“删除”链接，该链接将从 Sortable 中删除元素并调用服务器端脚本以删除服务器上的元素。此外，如何使用 JavaScript 将元素添加到现有 GetUIKit3 Sortable 的末尾？

【问题讨论】：

标签： getuikit sortables

【解决方案1】：

正在删除

只需在您的可排序元素中添加一些按钮，并将点击事件上的简单 jquery 绑定到它，就像这样简单：

<ul uk-sortable>
<li data-db-id="nn"><img/><a class="del-button">Remove</a></li>
</ul>

$('.del-button').on('click', function(e){
e.preventDefault();
let $li = $(this).parent('li');
let myDbId = $li.data('db-id');
$li.remove();
$.ajax({
  method: "POST",
  url: "some.php",
  data: { imgId: myDbId }
})
  .done(function( msg ) {
    alert( "Data Saved: " + msg );
  });
})

如果您想使用 UIkit 事件 - 还有一种方法可以通过编程方式捕获组件的删除事件，但我不知道此方法是否会从 args 返回已删除的元素：

UIkit.util.on('ul[data-uk-sortable]', 'remove', function (el) {
    console.log(el); //check if there's something
    // do something, ajax probably
});

添加

$('ul[uk-sortable]').append('<li data-db-id="nn"><img/><a class="del-button">Remove</a></li>')

当然，您必须提供应添加到容器中的数据。也许您可以在上传后合并 dropzone 事件（应该有类似的东西），然后附加该函数的结果。

【讨论】：

完美答案。就是这样。谢谢！