jquery - beim Ziehen eines geordneten Listeneintrags erhöht sich die Nummerierung der nachfolgenden Einträge immer um 1

Während der jQuery sortable widget in den meisten Fällen gut funktioniert, im Fall eines ordered list, der numbering gets botched up when we drag an element. Im Folgenden ist ein Beispielprogramm, um dies zu verdeutlichen:jquery - beim Ziehen eines geordneten Listeneintrags erhöht sich die Nummerierung der nachfolgenden Einträge immer um 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>

vor dem Ziehen:

enter image description here

Während ziehen:

enter image description here

Die Reihenfolge wiederhergestellt wird, sobald der Widerstand abgeschlossen . Dieser Fehler wurde zuvor bemerkt, aber nicht behoben. Hat jemand ein Heilmittel dafür gefunden?

Here ist die Geige für sie

Quelle

2012-12-20 Daud

Wenn Sie ein jsFiddle erstellen (und die erforderliche ui-Bibliothek als Ressource hochladen/auswählen), wären wahrscheinlich mehr Leute bereit, zu experimentieren und sofort zu helfen. Nur ein Hinweis! –

@ acheong87 - danke ... done that .. – Daud

Dies wird durch die placeholder von jQuery UI verursacht wird, die automatisch auf der Liste, wenn sortierbar Start hinzugefügt wird. Sie können den Platzhalter einfach beim Start-Ereignis ausblenden oder eine eigene Klasse erstellen, die keine anzeigt.

Hier ist die Idee:

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

Oder:

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

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

EDIT:

können Sie auch die Platzhalter-Anzeige tatsächlich eingestellt, so zu blockieren, dass es nicht als angenommen Liste Kind:

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

Hier geändert FIDDLE.

Quelle

2012-12-20 05:57:53 SubRed

Danke für das .. aber dabei entfernt das Element von der Seite gezogen .. und der Drag-Over-Effekt wird ein wenig hässlich .. Eine Geige zeigt den Effekt mit Ihr Update ist http://jsfiddle.net/Rf7jw/1/ und das ohne Ihre Lösung ist http://jsfiddle.net/Rf7jw/2/ – Daud

@Daud nur daran erinnern, dass Sie den Platzhalter als Block zu anzeigen festlegen können dies erreichen. Siehe meine bearbeitete Antwort. Ich hoffe es hilft. – SubRed

Vielen Dank ... funktioniert perfekt – Daud

jquery - beim Ziehen eines geordneten Listeneintrags erhöht sich die Nummerierung der nachfolgenden Einträge immer um 1

Antwort

Verwandte Themen