본문 바로가기
테크 세미나/개발 Nous

드래그 가능한 테이블 만들기

by Junmannn 2024. 3. 22.
반응형

https://jqueryui.com/sortable

 

Sortable | jQuery UI

Sortable Reorder elements in a list or grid using the mouse. Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable prope

jqueryui.com

 

오늘은 jquery 를 사용한 드래그 가능한 테이블을 만드려고 합니다

 

 

See the Pen Untitled by Junho Yoon (@junhoyoon95) on CodePen.

 

한 가지, 저는 여기서 

<input type="hidden" name="class_type_ids[]" value="0">

 

이런 코드를 추가했죠. 이 작업은 controller 에서 class_type_ids 

파라미터를 받아서 id 들을 가져와서 해당 데이터가 몇 번째로 변경이 되었는지 확인을 해서 순서별로 바꾸려고 한 행위입니다ㅎㅎ

 

뒷단도 코드를 남겨둘게요 각자의 언어에 맞게 변경하시면 됩니다

 

        params[:class_type_ids].each_with_index do |class_type_id, index|
            class_type = ClassType.find(class_type_id)
            class_type.priority = index
            class_type.save
        end
        
        #each_with_index 로 index 몇 번째인지 확인하는 코드입니다

 

 

반응형