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

Posted 2023-02-22

【中文标题】jQuery UI：可排序：正在排序的项目的占位符克隆

【英文标题】：jQuery UI: Sortable: Placeholder clone of item being sorted

【发布时间】：2013-08-24 07:37:05

【问题描述】：

我有一个想要排序的列表。我已经通过使用 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 来完成这项工作？

【参考方案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>

【讨论】：

感谢分享您的解决方案！欣赏！

【参考方案2】：

基于https://***.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>