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>

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

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>

Answer 2

基于https://stackoverflow.com/a/2156422/3085

<style>
  .sortable-placeholder {
    opacity: 0.3;
  }
</style>
<script>
  $(function() {
    var sortableList = $('#menu');
    sortableList.sortable({
      axis: 'y',
      revert: true,
      scroll: false,
      cursor: 'move',
      placeholder: 'sortable-placeholder',
      start: function(event, ui) {
        ui.placeholder.html(ui.item.html());
      }
    });
    sortableList.disableSelection();
  });
</script>

jQuery UI：可排序：正在排序的项目的占位符克隆

2 个答案: