Sortierbare Liste per Drag-and-Drop in Meteor

Question

Wie würden Sie das machen?

Die Elemente in der Liste könnten Datensätzen in einer Sammlung entsprechen, und ihre Position in der Liste könnte einem Feld in jedem Datensatz entsprechen (z. B. "Rang"), das aktualisiert werden müsste, wenn das Ereignis "Stop" eintritt.

Würde Meteor schön mit jQueryUI Sortable spielen? Was würde passieren, wenn mehrere Benutzer versuchen, die gleiche Liste auf einmal zu ziehen und zu sortieren? Braucht Meteor ein angepasstes Sortierverhalten?

Answer 1

EDIT: Die unten stehende Antwort ist veraltet, die Antwort von @cutemachine oder http://blog.differential.com/sortable-lists-in-meteor-using-jquery-ui ist viel näher am Stand der Technik.

---

Die kurze Antwort lautet: Das ist nicht einfach, wenn Sie wollen, dass es reaktiv ist. Um eine nicht-reaktive Version zu erstellen, wickeln Sie Ihre Vorlage einfach in eine {{#constant}} Tag und verbinden Sie die jquery-ui sortable in render wie @bento vorgeschlagen hat.

Um eine reaktive Version zu erstellen, muss Ihr sortierbares Widget mit Dingen umgehen, die sich unter ihm ändern (denken Sie daran, dass Sie mitten im Ziehen sind, wenn sich die Daten neu anordnen). Hier sind einige Gedanken darüber, wie Sie über sie gehen würde:

1. Leider wird es nicht einfach sein, sie zu animieren, was zu einer schlechten UX führen wird. Lassen wir das erst einmal beiseite.

2. Rendern Sie die Elemente mit etwas wie: {{#each items}} {{> item}} {{/item}}

   Diese ordnet sich selbst neu an, wenn die Daten vom Server herunterkommen (ohne Animation).

3. Richten Sie jedes Element so ein, dass es beim Rendern gezogen werden kann. Sie könnten entweder

   i. Verwenden Sie etwas wie jquery-ui draggable, und hängen Sie es in render über die item Vorlage. Dies könnte problematisch sein, da das darunter liegende Element während des Ziehens verschwinden kann, wenn sich die Reihenfolge gegenüber dem vorgelagerten Bereich ändert.

   ii. Implementieren Sie Ihren eigenen Dragging-Code, vielleicht unter Verwendung einer Bibliothek auf niedrigerer Ebene.

4. Wenn ein Element an seine Position gezogen wird, wird die Liste sofort lokal neu geordnet (damit der Benutzer das Richtige sieht). Hoffentlich respektiert der Server die Änderung aber auch darauf wollen wir nicht eingehen).

Ich denke, es gibt einen großen Bedarf für ein solches Widget, das auf eine kometenhafte Weise hergestellt wird. Es ist auf meinem persönlichen Radar (aber so sind eine Menge Dinge, einschließlich einer netten Möglichkeit, mit Animation neu zu ordnen).

Answer 2

Die neue Rendering-Engine Blaze von Meteor arbeitet jetzt viel besser mit jQuery zusammen. Hier ein kurzes Video die zeigt, wie man eine sortierbare Liste mit Meteor und jQuery-UI-sortable implementiert.

En Der Code ist im Meteor-Repository auf GitHub im Ordner example zu finden .

Answer 3

**Aktualisiert für 1.0

Probieren Sie MeteorPad aus: http://meteorpad.com/pad/TzQTngcy7PivnCCjk/sortable%20demo

Hier ist die Version, die ich implementiert habe - sehr ähnlich zu der von @tomsabin, aber keine Collection Behaviors erforderlich. Es hat gut für mich mit mehreren Benutzern gearbeitet und ist reaktiv.

HTML (Wahrscheinlich ist es keine gute Idee, die div id gleich _id zu machen, ich bin sicher, dass Sie eine bessere Lösung finden werden).

<template name="myList">
  <div class="step_list">
    {{#each card}}
      {{> card_template}}          
    {{/each}}
  </div>
</template>

<template name="card_template">
  <div class="card" id="{{_id}}">             
       <h3>{{name}}</h3>   
  </div>
</template>

JS

Template.myList.helpers ({
    card : function () {
        return Cards.find({}, {sort: {pos: 1}}
    )}
})

Template.myList.rendered = function(){

     $(".step_list").sortable({
       items: ".card",
       delay: 100,
       refreshPositions: true,
       revert: true,
       helper: "clone",
       scroll: true,
       scrollSensitivity: 50,
       scrollSpeed: 35,
       start: function(event, ui) {
        $(ui.helper).addClass("dragging");
       }, // end of start
       stop: function(event, ui) {
        $(ui.item).removeClass("dragging");
       }, // end of stop
       update: function(event, ui) {
        var index = 0;                   
        _.each($(".card"), function(item) {
          Cards.update({_id: item.id}, {
            $set:{
              pos: index++,
            }
          });
        });
      } 
    }).disableSelection();

}

Answer 4

Das jüngste Beispiel für sortierbare Listen mit Meteor und jQuery UI wurde im Oktober 2014 von Differential veröffentlicht:

http://differential.com/blog/sortable-lists-in-meteor-using-jquery-ui

Beachten Sie, dass frühere Lösungen möglicherweise nicht mehr funktionieren, nachdem Meteor auf die Blaze-Templating-Engine umgestellt wurde.