Question

两个问题：我想向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事件-还有一种以编程方式捕获组件的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>')

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

GetUIKit3-如何删除/添加元素以进行排序？

1 个答案: