4주차_210723

<sortable auto scroll>

• list item을 위/아래로 drag할 때 영역을 벗어나면 자동 scroll

• $(function () {
    $("#image_container").sortable({
      scroll: true, // 가장 자리에서 자동 scroll, default(true)
      scrollSensitivity: 10, // 스크롤 민감도(얼마나 스크로 될 것인지), default(20)
      scrollSpeed: 10, //스크롤 속도, defualt(40)
      containment: "document", // drag 영역 제한(화면안으로)
  
      // sort되는 동안 이벤트
      sort: function (event, ui) {
        // sort 되는 동안 border 설정
        ui.item.context.classList.add("drag-effect");
        var currentScrollTop = $(window).scrollTop(), // 현재 스크롤 수직 위치(맨위:0, 아래:max)
          topHelper = ui.position.top, // 현재 움직이고 있는 아이템 수직 위치
          delta = topHelper - currentScrollTop;
        // 현재 스크롤 위치 <= 이미지지 위치
        //console.log(`현재 스크롤 = ${currentScrollTop}`);
        //console.log(`이미지 위치 = ${topHelper}`);
  
        // delay(2초) 후 위치 조정(부드럽게 하기 위함)
        setTimeout(function () {
          if (delta > 50) delta = 50; // 내려가거나 올라가는 범위 조절
          $(window).scrollTop(currentScrollTop + delta);
        }, 2);
      },
      // sort 종료 event(bordr 해제)
      stop: function (event, ui) {
        ui.item.context.classList.remove("drag-effect");
      },
    });
    $("#image_container").disableSelection();
  });

 

[참고] 예제 코드

https://stackoverflow.com/questions/3739419/jquery-sortable-and-automatic-scrolling

JQuery Sortable and automatic scrolling

[참고] scroll 기초 지식

https://joo-dev.tistory.com/3

[JavaScript] 스크롤 맨 아래점 도달 시 글 불러오기

 

<sortable options>

 

 

[참고] sortable options

https://api.jqueryui.com/sortable/#option-cancel

Sortable Widget | jQuery UI API Documentation

 

 

<setTimeout & setInterval>

1) setTimeout

• 일정 시간 후, 함수 1번만 실행하고 싶을 때 사용(의도적인 지연 실행)
• setTimeout( callback함수, 지연시간s)
• clearTimeout(timeOut 변수명)

• const SET_TIME_OUT = setTimeout(function() { }, 5);	// 5초 후 실행
  clearTimeout(SET_TIME_OUT);	// 종료

2) setInterval

• 일정 시간 간격으로 함수 반복 실행하고 싶을 때 사용
• setInterval(callback 함수, loop시간s)
• clearInterval(interval 변수명)

• const SET_INTERVAL = setInterval(function{ }, 5);	// 5초마다 실행
  clearInterval(SET_INTERVAL);	// 종료

 

[참고]

https://wdevp.tistory.com/67

settimeout, setinterval 차이 및 예제