javascript - gridstack - Gridster bewegt Widgets nicht dynamisch




ng gridster 2 (2)

Ich versuche, Gridster.js zu verwenden, um einige Drag-and-Drop-Funktionen in meinem Projekt auszuführen .

Ich benutze eine Reihe von divs für meine Widgets, mit Formen und Schaltflächen in diesen, anstatt eine ungeordnete Liste zu verwenden.

Mein Problem ist, dass meine erste Spalte nicht ziehen kann und ich meine Widgets nirgends fallen lassen kann. Sie fallen einfach zu ihrem ursprünglichen Platz zurück

Hier ist mein Layout:

<div class="gridster">
     <div class="dragMe" data-row="1" data-col="1" data-sizex="1" data-sizey="1">
          <form>
                <button>//button stuff here </button>
          </form>
     </div>
     <div class="dragMe" data-row="1" data-col="2" data-sizex="1" data-sizey="1">
          <form>
                <button>//button stuff here </button>
          </form>
     </div>
     <div class="dragMe" data-row="2" data-col="1" data-sizex="1" data-sizey="1">
          <form>
                <button>//button stuff here </button>
          </form>
     </div>
     <div class="dragMe" data-row="2" data-col="2" data-sizex="1" data-sizey="1">
          <form>
                <button>//button stuff here </button>
          </form>
     </div>

... ETC
</div>

und hier ist meine js, die in doc bereit ist

var gridster = $('.gridster').gridster({
            widget_margins: [5,5],
            widget_selector: '.dragMe',
            widget_base_dimensions: [264, 103],
            max_cols: 5,
            max_rows: 5,
            resize: {
                enable: true
            },
            draggable: {
                start: function(event, ui) {
                    dragged = 1;
                },
                stop: function(event, ui){
                    var id = this.$helper[0].attributes[0].value;
                    var row = this.$helper[0].attributes[1].value;
                    var col = this.$helper[0].attributes[2].value;
                    console.log(id, row, col);
                }, 
                items: '.dragMe',
                limit: true
            }
        }).data('gridster');

Ich habe sowohl grister.js als auch die CSS-Datei. Irgendwelche Verbesserungsvorschläge?

https://code.i-harness.com


Ich denke, da ist etwas anderes in deinem Code, das es vermasselt; Überprüfe diese Datei , ich habe deinen Code kopiert und eingefügt und nur hinzugefügt:

.dragMe {
    background-color:#0f0;
}
.preview-holder {
    background-color:#000!important;
}

Färbe sie einfach so, dass du die Widgets sehen kannst. Ansonsten änderte ich nur den Text der Buttons und dein "... ETC". Es wird nicht gezogen, wenn Sie versuchen, es an der Schaltfläche zu ziehen, aber Sie können von einer beliebigen Stelle im Widget ziehen.

Wenn Sie aus irgendeinem Grund an der Schaltfläche ziehen müssen, würde ich empfehlen, sie zu einem Nicht-Eingabe- / Schaltflächenelement zu ändern und die von Ihnen benötigte Funktionalität mit JavaScript zu simulieren.

Wenn mein Gitter mir Probleme bereitet, hier ist, was ich überprüfe:

  • Öffnen / Schließen-Tags stimmen überein
  • Datenattribute machen Sinn (Gridster wird verrückt, wenn sich Widgets überlappen)
  • Stile werden entsprechend angewendet - stellen Sie sicher, dass es so aussieht, wie Sie denken.

    Ich hatte ein paar Mal, wo ich erwartet hatte, eine Sache zu sehen, und weil ich nicht angenommen hatte, dass das Javascript schuld war, aber es fehlten CSS-Stile.


I thing Gridster benötigt ein Element (zB div oder ul ) unterhalb des <div class="gridster"> Elements:

<div class="gridster">
     <div class="gridster-container">
         <div class="dragMe" data-row="1" data-col="1" data-sizex="1" data-sizey="1">
          <form>
            <button>//button stuff here </button>
          </form>
         </div>
         <div class="dragMe" data-row="1" data-col="2" data-sizex="1" data-sizey="1">
          <form>
            <button>//button stuff here </button>
          </form>
         </div>
         <div class="dragMe" data-row="2" data-col="1" data-sizex="1" data-sizey="1">
          <form>
            <button>//button stuff here </button>
          </form>
         </div>
         <div class="dragMe" data-row="2" data-col="2" data-sizex="1" data-sizey="1">
          <form>
            <button>//button stuff here </button>
          </form>
         </div>

    ... ETC
     </div>
</div>

Und das JavaScript:

var gridster = $(".gridster div.gridster-container").gridster({...

Sie können auch ul und li wie sie es auf ihrer Website verwenden.





gridster