Sortable - delete link and swapping between placeholder

Question

How to make a link that will remove (restore) the placeholder element to the main list on the left?

Just like that https://jqueryui.com/droppable/#photo-manager

In addition, I have written limit 1 for the placeholder in addition to the list on the left. But how do swapping between placeholder?

DEMO

Answer 1

There is already a function to restore a deleted item in the example att jqueryui.com.

// image recycle function
var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
function recycleImage( $item ) {
  $item.fadeOut(function() {
    $item
      .find( "a.ui-icon-refresh" )
        .remove()
      .end()
      .css( "width", "96px")
      .append( trash_icon )
      .find( "img" )
        .css( "height", "72px" )
      .end()
      .appendTo( $gallery )
      .fadeIn();
  });
}

Should work for you as well.