jQuery có thể sắp xếp lấy 2 phần tử được hoán đổi

Question

Tôi không thể tìm hiểu cách lấy phần tử đích với jQuery UI có thể sắp xếp.

$("#pages").sortable({ 
     opacity: 0.6, 
     update: function(event, ui) { 
      var first = ui.item; // First element to swap 
      var second = ???? // Second element to swap 
      swapOnServer(first, second); 
     } 
    }); 

Tất cả các tùy chọn Tôi đã thử điểm đến nguyên tố này được rê đến, nhưng không phải là người nó được hoán đổi với: ui.item[0], event.srcElement, event.toElement.

Ngoài ra, this trỏ đến phần tử LIST (OL).

Nói thứ hai Ý tôi là như sau:

gốc trật tự là:

| 0 | | 2 | |

Chúng tôi kéo yếu tố 1 và thả nó ở vị trí 3. Mà sẽ kết thúc với:

| 0 | | 2 | |

Vì vậy, phần tử đầu tiên là 1 và phần tử thứ hai là 3 (WRONG! Xem bên dưới).

CẬP NHẬT: Tôi đã nhận ra rằng tôi đã hiểu sai. Thứ tự mới trong trường hợp này sẽ là.

| 0 | 2 | 3 | |

Kết quả là câu hỏi của tôi không thực sự hợp lý. Cảm ơn tất cả mọi người đã giúp đỡ. Tôi sẽ đánh dấu bỏ phiếu và đánh dấu một câu trả lời.

Vì vậy, câu hỏi đặt ra là làm thế nào để có được phần tử thứ hai ở đây?

---

CÁC CÁCH GIẢI QUYẾT HIỆN (như không có hạn như trao đổi trong sắp xếp được) dưới đây. Nó sử dụng mảng tạm thời với các đơn đặt hàng.

var prevPagesOrder = []; 
    $("#pages").sortable({ 
     start: function(event, ui) { 
      prevPagesOrder = $(this).sortable('toArray'); 
     }, 
     update: function(event, ui) { 
      var currentOrder = $(this).sortable('toArray'); 
      var first = ui.item[0].id; 
      var second = currentOrder[prevPagesOrder.indexOf(first)]; 
      swapOnServer(first, second); 
     } 
    }); 

Xin cảm ơn,
Dmitriy.

Answer 1

Thực sự không có mục "thứ hai". Bạn có một mục, và bạn chỉ đơn giản là đặt nó ở một vị trí khác.Các mục xung quanh nó điều chỉnh vị trí của chúng cho phù hợp. Nếu bạn muốn nhận một mảng của tất cả các mục, bạn có thể sử dụng phương thức toArray.

Answer 2

Hãy thử sử dụng hàm serialize cung cấp cho bạn một hàm băm trong danh sách các mục theo thứ tự.

Nếu bạn chỉ cần mục mà mục mới đi bỏ trước khi bạn có thể làm điều này:

$("#pages").sortable({ 
    opacity: 0.6, 
    update: function(event, ui) { 
     var first = ui.item; // First element to swap 
     var second = ui.item.prev(); 
     swapOnServer(first, second); 
    } 
}); 

thứ hai sẽ được null nếu nó vào lúc bắt đầu của danh sách.

Answer 3

hãy nhìn vào các "thể thay" jQuery plugin:

http://plugins.jquery.com/project/Swapable

Nó tương tự như "Sortable", nhưng chỉ có hai yếu tố của nhóm đã chọn bị ảnh hưởng: yếu tố kéo và thả một trong đó được đổi chỗ . Tất cả các yếu tố khác đều ở vị trí hiện tại của chúng. Plugin này được xây dựng dựa trên plugin jQuery "Sắp xếp" hiện có và kế thừa tất cả các tùy chọn có thể sắp xếp.

Answer 4

Bạn có thể sử dụng http://plugins.jquery.com/project/Swapable

nhưng điều này không phải là quá tốt Plugin

Answer 5

Bạn có thể sử dụng draggable và droppable thay vì sortable để đạt swappable hiệu lực. Trong thực tế, điều này sẽ như sau:

(function() { 
    var droppableParent; 

    $('ul .element').draggable({ 
     revert: 'invalid', 
     revertDuration: 200, 
     start: function() { 
      droppableParent = $(this).parent(); 

      $(this).addClass('being-dragged'); 
     }, 
     stop: function() { 
      $(this).removeClass('being-dragged'); 
     } 
    }); 

    $('ul li').droppable({ 
     hoverClass: 'drop-hover', 
     drop: function (event, ui) { 
      var draggable = $(ui.draggable[0]), 
       draggableOffset = draggable.offset(), 
       container = $(event.target), 
       containerOffset = container.offset(); 

      $('.element', event.target).appendTo(droppableParent).css({opacity: 0}).animate({opacity: 1}, 200); 

      draggable.appendTo(container).css({left: draggableOffset.left - containerOffset.left, top: draggableOffset.top - containerOffset.top}).animate({left: 0, top: 0}, 200); 
     } 
    }); 
}()); 

Demo, http://jsfiddle.net/FZ42C/1/.