jquery-ui - jQuery UI : Sortable: Placeholder clone of item being sorted

Question

我有一个要排序的列表。我已经通过使用 jQuery UI Sortable 完成了这项工作。我想要做的是使用自定义占位符作为可以删除列表项的位置。我不知道如何制作一个占位符，它是正在排序的项目的克隆。而不是一个空的占位符，我想显示一个正在排序的项目的克隆，这样你就可以得到一种“预览”。

简而言之， ui.item[0].outerHTML 是我想用作自定义占位符的东西，我似乎无法得到这个。

  <script>
  $(function() {
    $( "#menu" ).sortable({
        start: function(event,ui) {
            console.log(ui.item[0].outerHTML);
        },
        placeholder: {
            element: function(event,ui) {
                console.log(ui.item[0].outerHTML);
            }
        }
    });
    $( "#menu" ).disableSelection();
  });
  </script>

以上是我现在所拥有的，但这显然不起作用。有没有一种简单的方法可以只用 sortable 来完成这项工作？

Answer 1

经过一番修修补补(我从这个 related question 中得到启发)，我得出了以下解决方案:

在开始事件中，我克隆了正在排序的原始项目。我将克隆传递给占位符，在那里我可以更新它的内容。 (ui.item 在这里不可用)

<script>
$(function() {
    $("#menu").sortable({
        start: function( event, ui ) {
            clone = $(ui.item[0].outerHTML).clone();
        },
        placeholder: {
            element: function(clone, ui) {
                return $('<li class="selected">'+clone[0].innerHTML+'</li>');
            },
            update: function() {
                return;
            }
        }

    });
});
</script>