我希望我的硬币只能移动到一个空列，如果移动，它们将切换位置。例如：如果第一个li移到空li（第三个li），则第一个li为空，第三个li为硬币。切换位置的脚本是可行的，但我不知道如何只移动到空李。

<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 550px; }
  #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 3em; text-align: center; }
.coklat {
    background-image: url('cUrl=coin1.PNG');
    background-repeat: no-repeat;
}
.putih {
    background-image: url('cUrl=coin2.PNG');
    background-repeat: no-repeat;
}
</style>
<script>
    $( function() {
      $( "#sortable" ).sortable();
      $( "#sortable" ).disableSelection();
    } );
    </script>

<script>
$(function() {
    var oldIndex;

    $("#sortable").sortable({
        start: function(event,ui) {
            oldIndex = ui.item.index();
        },stop: function(event,ui) {
            var newIndex = ui.item.index();
            var movingForward = newIndex > oldIndex;            
            var nextIndex = newIndex + (movingForward ? -1 : 1);

            var items = $('#sortable > li');

            // Find the element to move
            var itemToMove = items.get(nextIndex);
            if (itemToMove) {

                // Find the element at the index where we want to move the itemToMove
                var newLocation = $(items.get(oldIndex));

                // Decide if it goes before or after
                if (movingForward) {
                    $(itemToMove).insertBefore(newLocation);
                } else {
                    $(itemToMove).insertAfter(newLocation);
                }
            }
        }
    });

    $("#sortable").disableSelection();
});
</script>

<ul id="sortable">
    <li class="ui-state-default coklat"></li>
    <li class="ui-state-default coklat"></li>
    <li class="ui-state-default"></li>
    <li class="ui-state-default putih"></li>
    <li class="ui-state-default putih"></li>
</ul>