JQuery UI Sortierbar + Laravel Collection Chunk: Zeilen ziehbar statt einzelner Elemente

Question

Ich habe ein Problem. Da ich Bootstrap verwende, habe ich Zeilen, die jeweils 3 Bilder enthalten. Um es so zu machen (weil die Bilder aus der Datenbank stammen) verwende ich die in Laravel verfügbare Funktion . Dies ermöglicht mir, eine .row einfügen, dann 3 Bilder mit einem .col-md-4 zeigen und dann erstellt ein weiteres .row und so weiter.

<div id="sortable-image-container"> 
    @foreach($product->images->chunk(3) as $chunk) 
     <div class="row"> 
      @foreach($chunk as $image) 
       <div class="col-md-4"> 
        <div class="card"> 
         <div class="header text-right"> 
          <a href="{{ route('products.imageDelete', ['pid' => $product->id, 'iid' => $image->id]) }}" class="btn btn-danger">X</a> 
         </div> 
         <div class="content"> 
          <img src="http://placehold.it/500x500" alt="" class="center-block img-responsive"> 
         </div> 
        </div> 
       </div> 
      @endforeach 
     </div> 
    @endforeach 
</div> 

Jetzt möchte ich jQuery UI Sortable auf diese Bilder integrieren, mit:

$('#sortable-image-container').sortable({}); 

es jedoch eine Reihe als ziehbar Element erklärt, anstelle eines produkt Bildbox.

Im Bild sind hier zwei Reihen, die ersten, die 3 Bilder Box und das zweite Bildfeld. Wie Sie sehen können, packe ich die ganze Reihe, um statt eines einzelnen Elements zu ziehen. Da ich chunk() verwende, kann ich keine schöne Lösung finden, um einzelne Elemente ziehbar zu machen.

Answer 1

Scheint, es selbst herausgefunden zu haben. Es gibt eine Elementoption, die standardmäßig lautet: > *. Mit der Einstellung: items: '> .row > *', kann ich jetzt einzelne Elemente greifen.

$('#sortable-image-container').sortable({ 
     items: '> .row > *' 
    });