다중 정렬 ( 드래그 앤 드랍 )

회사에서 어떤 리스트를 다중 선택 드래그 해달라는 요청을 받아 코드를 열어봤더니

table을 사용하셔서 그런지 tableDnD라는 라이브러리를 사용해 놓으셨었다.

 

단점이 다중 선택이 안되고 스크롤 인식이 fixed되어 있는 느낌..?

그러니까 브라우저창 기준으로 스크롤 하고 있지 않은 리스트였는데

스크롤 하고 있는 태그가 아닌 body기준으로 드래그앤 드랍 기준을 잡는것 같았다...

 

그래서 사수라고 해야하나..? 옆분에게 여쭤보니 코드 결국 바꾸어야 한다며....

sortable을 사용할려고 하니 테이블은 또 ui가 깨지더라구 증말이지^^

 

어찌됐든 저찌됐든 간단하게 업데이트를 해주려고 했으나 시간이 걸릴 작업이기에 양해를 구하고...

이번 포스팅은 multisortable을 쓰기 위해 코드를 고치며 해당 라이브러리에 대한 메모다.

 

---

https://github.com/shvetsgroup/jquery.multisortable

shvetsgroup/jquery.multisortable

 

어느 라이브러리를 사용해봐도 모두 똑똑이들이 만든거라 사용법은 간단하다.

$("아이템을 감싸고 있는 부모태그").multisortable({
    items: "아이템",
    selectedClass: "선택된 아이템에 줄 클래스명",
});

이외에도 click, stop, eventdown이벤트가 있다. 깃허브에 간단히 설명되어 있으니 참고하면된다.

다중선택은 ctrl+클릭으로 선택한다

 

그리고 나는 multisortable을 사용하면서 또 다른 문제점에 직면한다.

multisort해준 아이템 안에는 input태그및 textarea가 존재했는데 입력을 하고싶어도 드래그가 된다.

 

예전엔 버튼을 두개 만들어서 문자 편집 버전/정렬 버전으로 나누어서 편집하도록 했는데

이번엔 그냥 input태그 클릭시 multisortable을 꺼버렸다.

function setSortable(sortable){		
    if(sortable == true){		
    	// 켜기
        $("#box").multisortable("enable");
    }
    else{
    	// 끄기
        $("#box").multisortable("disable");
    }	
}

 

 

본문보다 서론이 더 길었네...ㅎㅎ

그래도 일기형식이 재미있으니까...!

여기서 끝 :)