GetUIKit3 -如何将元素移除/添加到可排序中？

Question

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

Answer 1

去除

只需在可排序元素中添加一些按钮，并将click事件上的简单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事件--也有一种方法可以编程地捕获组件的remove事件，但是我不知道这个方法是否会从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>')

当然，您必须提供应该添加到容器中的数据。也许您可以在上传后组合下拉区域事件(应该有类似的内容)，然后追加该函数的结果。