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

Question

两个问题：我想将 "remove" link 添加到 GetUIKit3 Sortable 中，它将从 Sortable 中删除元素并调用服务器端脚本以删除服务器上的元素. 此外，如何使用 JavaScript?

将元素添加到现有 GetUIKit3 Sortable 的末尾

Answer 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 事件 - 还有一种方法可以通过编程捕获组件的删除事件，但我不知道此方法是否会 return 从 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 事件（应该有类似的东西），然后附加该函数的结果。

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

GetUIKit3 - How to remove / add element to sortable?

sortables

getuikit