Sortieren der Elemente der Liste nach oben und unten nicht mit drag und drop

Ich möchten, dass ein Benutzer in der Lage zu Sortieren Sie eine Liste klicken Sie auf Ereignis. Hier ist mein code:

JS:

$(function() {

  $('#reOrder li').each(function, (index) {

    $(this).attr('id', index);

  });

  $("#reOrder").delegate("li", "click", function() {

    var $indexItem = $(this).index('#reOrder li');

    var $thisTxt = $(this).text();

    var $prevTxt = $(this).prev('li').text();

    $($thisTxt).replaceWith($prevTxt);

    //alert($thisTxt);

    //alert($prevTxt);

  });

});

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="reOrder">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

So, in diesem Beispiel würde ich gerne verschieben geklickt li-Element und seinen Inhalt in die position oben in der DOM. Ich nehme an, streng genommen ist es nach unten verschoben wird in den index der li-Elemente.

Diese wird später erweitert um Schaltflächen, die sich bewegen li-Elemente nach oben und unten und einer submit-Schaltfläche speichert die Reihenfolge/Stand der Liste Elemente.

Ich fand eine Menge von Informationen auf drag-and-drop (ist nicht erforderlich), aber nicht viel auf diese Art von Funktionalität.

  • "das ist nicht erforderlich" - meinst du "nicht erforderlich" oder "verboten"? Drag und drop ist die Bedienung sehr intuitiv und funktioniert auch auf touchfähige Geräte (ich hoffe - ich habe nicht versucht).
  • Sorry ich meinte drag-and-drop-Funktionalität ist nicht Voraussetzung. Ich denke, es wäre ideal, und fügen Sie Wert, aber der Kunde will es-Funktion, mit anklickbaren links, die Elemente verschieben nach oben und unten.
InformationsquelleAutor RyanP13 | 2010-08-16
  1. 3

    Etwas, was Sie vielleicht prüfen wollen, ist die jQuery-UI-sortable

    Wenn Sie wollen einfach nur Objekte verschieben, indem Sie auf etc. haben Sie einen Blick auf die folgenden Methoden:

    trennen Funktion

    DOM einfügen Funktionen

    $("document").ready(function() {
    $("#reOrder li").click(function() {
        var index = $("#reOrder li").index(this);
        if (index != 0) {
           //li item is not sitting in the first position
           $("#reOrder li:eq(" + (index - 1) + ")").before(this);
        }
    });
});

    Trennen Sie entfernen können der angeklickte element aus dem DOM und haben eine Kopie verfügbar ist, können Sie setzen Sie dann wieder in die gewünschten position mit einer der DOM-einfügen-Funktionen.

    • Das ist toll. Aktualisiert haben, es jetzt aber möchte unbind click-Ereignis auf das erste li, um Sie zu stoppen entfernt werden, wenn ich auf das erste Element.
    • Hi Ryan, haben Sie einen Blick auf die Beispiel-Funktion " (oben), überprüft das Element bei index 0, um sicherzustellen, dass es nicht versuchen Sie anrufen, bevor Sie() auf das Element.
    • Hier aktualisiert: jsfiddle.net/8vWXZ/6 Dank.
    InformationsquelleAutor going
  2. 0
    $(function() {
  var $ul = $('ul');
  $ul.css({ position: 'relative', height: $ul.height(), width: $ul.width() });

  $ul.find('>*').each(function(i, e) {
    var $e = $(e);
    $e.data($e.position());
  }).each(function(i, e) {
    var $e = $(e);
    $e.css({ position: 'absolute', top: $e.data('top'), left: $e.data('left') });
  }).click(function(e) {
    var $e = $(e.target);
    var $be = $e.prev();
    if (!$be.length) return;
    $be.before($e).stop().animate($e.position());
    $e.stop().animate($be.position());
  });
});

    http://jsbin.com/eduhaf/4/edit

    InformationsquelleAutor abrkn
Schreibe einen Kommentar