jquery - podczas przeciągania uporządkowanej pozycji listy numeracja kolejnych elementów zawsze zwiększa się o 1

Podczas gdy jQuery sortable widget działa dobrze w większości przypadków, w przypadku ordered list, numbering gets botched up when we drag an element. Poniżej znajduje się przykładowy program, aby zilustrować następująco:jquery - podczas przeciągania uporządkowanej pozycji listy numeracja kolejnych elementów zawsze zwiększa się o 1

<!DOCTYPE html> 
<html> 

    <head> 
     <script src="jquery-1.6.2.min.js"></script> 
     <script src="jquery-ui-1.8.16.custom.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       $('ol').sortable(); 
      }); 
     </script> 
    </head> 

    <body> 
     <ol> 
      <li> 
       <label for="name">Name</label> 
       <input type="text" id="name" /> 
      </li> 
      <li> 
       <label for="class">Class</label> 
       <input type="text" id="class" /> 
      </li> 
     </ol> 
    </body> 

</html>

przed przeciągnięciem:

enter image description here

Podczas przeciągania:

enter image description here

Kolejność zostanie przywrócony po zakończeniu przeciągania jest kompletna . Ten błąd został wcześniej zauważony, ale nie został naprawiony. Czy ktoś znalazł lek na to?

Here jest skrzypce dla niego

Źródło

2012-12-20 Daud

Jeśli utworzysz bibliotekę jsFiddle (i prześlesz/zaznaczysz niezbędną bibliotekę interfejsu użytkownika jako zasób), prawdopodobnie więcej osób będzie skłonnych do eksperymentowania i natychmiastowej pomocy. Tylko wskazówka! –

@ acheong87 - dziękuję ... zrobiłeś to .. – Daud

Jest to spowodowane przez placeholder jQuery UI, który jest automatycznie dodany do listy sortable podczas startu. Możesz po prostu ukryć symbol zastępczy na początku zdarzenia lub utworzyć własną klasę, która nie wyświetla żadnych znaków.

Oto pomysł:

$(document).ready(function() { 
    $('ol').sortable({ 
     start: function(event, ui){ 
      $(ui.item).parent().find('.ui-sortable-placeholder').hide(); 
     }, 
    }); 
});

Lub:

<script> 
    $(document).ready(function() { 
     $('ol').sortable({placeholder: "sortable-placeholder"}); 
    }); 
</script> 

<style> 
    .sortable-placeholder {display: none;} 
</style>

EDIT:

Można również właściwie ustawić wyświetlanie zastępczy do bloku tak, że nie przyjmuje się jako lista dziecko:

.sortable-placeholder { 
    height: 20px; 
    display: block; 
}

Tutaj zmodyfikowano FIDDLE.

Źródło

2012-12-20 05:57:53 SubRed

Dzięki za to .. ale to usuwa element przeciągany ze strony ... a efekt przeciągania staje się trochę brzydki .. Skrzypce pokazujące efekt z Twoja poprawka to http://jsfiddle.net/Rf7jw/1/, a ta bez twojej poprawki http://jsfiddle.net/Rf7jw/2/ – Daud

@Daud pamiętaj, że możesz ustawić element zastępczy tak, aby wyświetlał jako blok zrealizuj to. Zobacz moją zredagowaną odpowiedź. Mam nadzieję, że to pomoże. – SubRed

Wielkie dzięki ... działa idealnie – Daud

jquery - podczas przeciągania uporządkowanej pozycji listy numeracja kolejnych elementów zawsze zwiększa się o 1

Odpowiedz

Powiązane problemy