Trình trợ giúp bản sao có thể sắp xếp không hoạt động

Có lẽ tôi không hiểu cách hoạt động của bản sao có thể sắp xếp, nhưng đây là những gì tôi muốn làm.Trình trợ giúp bản sao có thể sắp xếp không hoạt động

Khi sắp xếp một mục, tôi muốn một bản sao của mục tôi đang kéo cho đến khi tôi ngừng thả mục ở vị trí mới của nó.

Dưới đây là các mã:

<html> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script> 

    <style type="text/css"> 
     .sort { width: 150px; } 
     .ui-state-highlight { background-color: #000; height:2px; } 
    </style> 
</head> 
<body> 
    <div> 
     <ul class="sort"> 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li>Item 3</li> 
      <li>Item 4</li> 
     </ul> 
    </div> 

    <script type="text/javascript"> 
     $(function() { 
      $('.sort').sortable({ 
       helper: 'clone', 
       placeholder: 'ui-state-highlight', 
       opacity: '.5' 
      }) 
     }) 
    </script> 
</body> 
</html>

Cảm ơn trước sự giúp đỡ!

Nguồn

2010-06-11 Jeremy Seekamp

Khi bạn sử dụng tùy chọn sao chép, mục gốc bị ẩn với style="display: none" khi bạn bắt đầu kéo. Bạn có thể đính kèm một trình xử lý cho sự kiện sắp xếp (hoặc bất kỳ sự kiện nào ẩn mục gốc) để hiển thị lại nó. Tất cả mọi thứ sẽ làm việc cho bạn sau đó.

P.S. Tôi đã sử dụng Firebug để xem điều gì đang xảy ra với phần tử gốc. Nếu bạn không sử dụng nó, bạn thực sự nên được!

Nguồn

2010-06-11 17:21:56

Mặc dù nó có thể không khắc phục sự cố bạn đang gặp phải. Có thêm dấu phẩy ở cuối tham số của bạn.

opacity: '.5',

Nguồn

2010-06-11 17:15:29 Mike

Cách duy nhất để hack nó. Bạn có thể dẫn từ đây trở đi. Thay đổi cấu hình của bạn như dưới đây.

 $('.sort').sortable({ 
      helper: 'clone', 
      placeholder: 'ui-state-highlight', 
      opacity: '.5', 
      start: function(event, ui) { 
       $('.sort').find('li:hidden').show(); 
      } 
     })

Nguồn

2010-06-11 19:00:53 simplyharsh

+11

$ (ui.item) .show() sẽ được nhiều hơn 'chính xác' – Vigrond

Và $ (ui.helper) chứa các helper nhân bản. Nếu bạn muốn sửa đổi nó. – Armin

Tôi có hai danh sách, sortable1 và sortable2. Tôi muốn sao chép các mục từ sortable1 để sortable2 và ngược lại.

Một cải tiến phải là để kiểm tra xem đó có phải là phần tử hàng đầu hay không. prev() sẽ không hoạt động. Vì vậy, hãy kiểm tra xem có ưu tiên không, nếu không sử dụng sau().

Giải pháp của tôi là thế này:

$("#sortable1").sortable({ 
     helper:"clone", 
     connectWith: "#sortable2", 
     start:function(event,ui){ 
      $(ui.item).show(); 
      clone = $(ui.item).clone(); 
      before = $(ui.item).prev(); 
     }, 
     stop:function(event, ui){ 
      before.after(clone); 
     } 
    }).disableSelection(); 
$("#sortable2").sortable({ 
     helper:"clone", 
     connectWith: "#sortable1", 
     start: function(event, ui){ 
      $(ui.item).show(); 
      clone = $(ui.item).clone(); 
      before = $(ui.item).prev(); 
     }, 
     stop:function(event, ui){ 
      before.after(clone); 
     } 
    }).disableSelection();

Nguồn

2011-06-21 13:11:00

Vài lời về cải tiến mà John Bledsoe nói. Đối với nhân bản các yếu tố đầu tiên trong # sortable1 tôi sử dụng một mã số ví dụ:

stop:function(event, ui){ 
     if (before.length) before.after(clone); 
     else $(this).prepend(clone); 
    },

Nguồn

2017-10-31 20:33:13

Trình trợ giúp bản sao có thể sắp xếp không hoạt động

Trả lời

Các vấn đề liên quan