JQuery UI Sortable + Laravel Collection 청크 : 단일 요소 대신 draggable 행

Question

문제점이 있습니다. 부트 스트랩을 사용할 때마다 3 개의 이미지가 포함 된 행이 있습니다. 이런 식으로 (이미지가 데이터베이스에서 왔기 때문에) 나는 Laravel에서 사용할 수있는 chunk() 함수를 사용하고 있습니다. 이를 통해 .row을 삽입 한 다음 각각 .col-md-4으로 3 개의 이미지를 표시 한 다음 .row 등을 새로 만듭니다.

<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> 

은 지금은 사용하여 해당 이미지에 jQuery를 UI의 정렬 가능한을 통합하려는 :

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

그러나, 대신 제품 이미지 박스에, 드래그 요소로 행을 선언합니다. 여기 그림에

두 행, 제 3 개 이미지 함유 상자와 두번째 이미지 박스이다. 보시다시피 전체 요소를 하나의 요소 대신 드래그하여 전체 행을 가져옵니다. chunk()를 사용하기 때문에 단일 요소를 드래그 할 수있는 좋은 솔루션을 찾을 수 없습니다.

Answer 1

혼자서 알아 낸 것 같습니다. 항목 옵션은 기본적으로 > *입니다. 설정 : items: '> .row > *', 이제 단일 요소를 가져올 수 있습니다.

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