GetUIKit3 - How to remove / add element to sortable?

Question

Two questions: I would like to add a "remove" link to a GetUIKit3 Sortable that will remove the element from the Sortable and call a server-side script to remove the element on the server. In addition, how do I add an element to the end of an existing GetUIKit3 Sortable using JavaScript?

Answer 1

REMOVING

just add some button inside your sortable element and bind simple jquery on click event to it, something as simple as:

<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 );
  });
})

If you want to make use of UIkit event - there's also a way to programatically catch remove event of the component, but I don't know if this method will return removed element from the args:

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

ADDING

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

Of course you have to provide data that should be added to the container. Maybe you could combine dropzone event after upload(there should be something like that) and then append the result from that function.