jQuery Sortable 기능 클릭시 기능 동작 막는 처리

[ 문제 상황 ]

- jQuery의 Srotable 기능을 사용하여 순서 변경 기능을 사용하고 있다.

- handle을 통해 제어되고 있는데 drag&drop이 아닌 클릭 이벤트로도 sortable이 start 되었고 이 동작에서 오류를 가져오게 되어 클릭시 sortable이 동작하는 것을 막으려고 한다.

$(".test").sortable({
    helper: "clone",
    placeholder: "highlight",
    opacity: 0.35,
    cursor: "grabbing",
    forceHelperSize: true,
    handle: ".handle",
    items: ".item",
    axis: "y",
});

현재 동작되고 있는 예시이다.

 

[ 시도해 볼 수 있는 방법 ] 

1. sortable 옵션에서 distance와 delay 옵션을 사용할 수 있다.

distance

• 정렬을 시작할 시점에 대한 허용 범위(픽셀).
• 지정된 경우 마우스를 거리 너머로 드래그한 후에야 정렬이 시작됩니다.
• 핸들 내의 요소를 클릭할 수 있도록 사용할 수 있습니다.

delay

• 정렬을 시작할 시간을 정의하는 밀리초 단위 시간입니다.
• 지연을 추가하면 요소를 클릭할 때 원치 않는 끌림을 방지하는 데 도움이 됩니다.

 

2. start이벤트 내에서 cancel 기능 사용

문제 : this.helper is null 오류 발생

원인 : jQuery UI 설명서를 읽어보면, 취소 작업은 stop 및 receive 이벤트에서만 지원된다는 것.. 기본적으로 사용자가 드래그를 시작하면 새 위치에 항목을 놓을 때까지 되돌릴 수 없다.

 

3. 마우스 이벤트 내에서 제어하는 방법

sortable("option", "disabled", true); // sortable 기능 비활성화

sortable("option", "disabled", false); // sortable 기능 활성화

또는

sortable("cancel") 이용

 

 

[해결 방법]

결론적으로 해결된 방법은 3번. 마우스 이벤트내에서 제어하는 방법이였다.

설정된 handle에서 drag&drop으로 옮겼을 때는 마우스이벤트가 mousedown만 동작한다 하지만 click을 했을때는 mousedown 이후 mouseup 이벤트가 실행되기 때문에 이 차이를 이용하여 해결하였다.

let isMouseUpEvent = false;

// mouseup event
$("body").on("mouseup", ".handle", () => {
    isMouseUpEvent = true;
});

// mousedown event
$("body").on("mousedown", ".handle", () => {
    isMouseUpEvent = false;
});

// mousemove event
$("body").on("mousemove", () => {
    if (isMouseUpEvent) {
        self.$editorBody.sortable("cancel");
    }
});

 

handle에 클릭하였을때는 순서 변경 동작이 되지 않도록 sortable("cancel")을 사용하여 처리하였다.

* mouseup 이벤트 내에서 sortable("cancel")을 하지 않은 이유 :  handle에 mousedown 이벤트가 들어오면 해당 아이템의 영역에서 포인트가 벗어나면 sortable이 start 되었다.

그래서 mousemove에 sortable("cancel") 되도록 처리했다.

 

---

더 많은 sortable의 기능들은 아래의 URL을 참고하면 좋다.

https://api.jqueryui.com/sortable/