Giao diện người dùng jQuery: Sắp xếp: Bản sao trình giữ chỗ của mục đang được sắp xếp

Question

Tôi có danh sách mà tôi muốn sắp xếp. Tôi đã làm điều này bằng cách sử dụng jQuery UI Sortable. Điều tôi muốn làm là sử dụng trình giữ chỗ tùy chỉnh cho vị trí mà mục danh sách có thể bị xóa. Những gì tôi không thể tìm ra là làm thế nào để làm cho một giữ chỗ đó là một bản sao của mục đang được sắp xếp. Thay vì một trình giữ chỗ trống, tôi muốn hiển thị một bản sao của mục đang được sắp xếp để bạn có được một loại 'xem trước' để nói.

Tóm lại, ui.item [0] .outerHTML là thứ tôi muốn sử dụng làm trình giữ chỗ tùy chỉnh, tôi dường như không thể làm được điều này.

<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> 

Ở trên là những gì tôi có bây giờ, nhưng điều đó không rõ ràng. Có cách nào dễ dàng để hoàn thành công việc này chỉ với một cách dễ dàng?

Answer 1

Sau một chút mày mò (i đã lấy cảm hứng từ related question này), tôi đã đến giải pháp sau đây:

Trong trường hợp đầu, tôi sao chép mục gốc đang được sắp xếp. Tôi chuyển bản sao sang trình giữ chỗ, nơi tôi có thể cập nhật nội dung của nó. (Ui.item không có sẵn ở đây)

<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

Dựa trên 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>