jquery.ui.draggable 중국어 문서(원본 번역)_jquery

[원본 번역]
JQuery UI Draggable 플러그인은 선택한 요소를 마우스로 드래그할 수 있도록 만드는 데 사용됩니다.
드래그 가능한 요소는 CSS의 영향을 받습니다. ui- draggable, 드래그 중 CSS: ui-draggable-draging.
드래그뿐만 아니라 완전한 드래그 앤 드롭 기능이 필요한 경우 드래그 가능한 드롭 기능을 제공하는 JQuery UI의 Droppable 플러그인을 참조하세요. . 목표.
모든 콜백 함수(시작, 중지, 드래그 등 이벤트)는 두 가지 매개변수를 허용합니다:
event: 브라우저 기본 이벤트
ui: 다음과 같은 주요 속성을 가진 JQuery ui 객체
ui.helper: 드래그되는 요소의 JQuery 래퍼 객체, ui.helper.context는 기본 DOM 요소를 가져올 수 있습니다.
ui.position: ui.helper(즉, 드래그하려는 요소) 상대 상위 요소(자체 요소 포함, 최상위 수준인 경우 본문에 해당)의 오프셋에 대한 값은 객체 {top, left}입니다. 즉, ui.position을 사용할 수 있습니다. .top은 요소와 상위 요소를 가져옵니다. 상단의 현재 오프셋
ui.offset: ui.position에 동의합니다. 여기서는 브라우저 콘텐츠 영역의 왼쪽 상단 테두리로부터의 오프셋을 나타냅니다(참고, 콘텐츠 영역입니다). , html의 본문 영역이 아닙니다. html의 본문은 기본적으로 다양한 브라우저에서 오프셋을 기준으로 오프셋됩니다.)
[옵션]
addClasses:
[Type]Boolean(부울 값) )
[기본값] true
[영향]
드래그 가능한 요소를 ui-draggable 스타일로 장식할지 여부를 설정하는 데 사용됩니다. 주로 .draggable()을 통해 많은(수백) 요소를 초기화할 때 성능을 최적화하는 데 사용됩니다. 그러나 이 옵션은 ui-draggable-dragging 스타일에 영향을 주지 않으며 드래그 프로세스 스타일을 변경합니다.
true는 ui-draggable 스타일이 요소에 추가되었음을 의미합니다.
false는 ui-draggable을 의미합니다. 스타일은 요소에 추가되지 않습니다.
[코드 예] 드래그 가능, 속성 값 가져오기, 속성 값 설정 등의 기타 옵션을 초기화합니다. 특수 기능 외에는 자세히 설명하지 않고 코드만 붙여넣습니다.
[초기화]
$('.selector'). draggable({ addClasses: false });
UI 드래그 가능 스타일을 추가하지 않고 .selector로 선택한 요소를 드래그 가능한 컨트롤로 렌더링합니다.
[Get 속성 값]
var addClasses = $('#draggable').draggable('option', 'addClasses');
.selector 선택기로 선택한 드래그 가능한 컨트롤의 addClasses 옵션 값을 가져옵니다.
[속성 값 설정]
$('.selector').draggable('option', 'addClasses', false);
.selector 선택기로 선택한 드래그 가능한 컨트롤의 addClasses 옵션 값을 다음으로 설정합니다. false.
appendTo:
[Type]Element, Selector(HTML 요소 객체 또는 선택기)
[기본값]'parent' 상위 요소
[Influence]
UI를 지정하는 데 사용됩니다. 드래그 프로세스 중 컨트롤의 도우미 컨테이너, 기본적으로 ui.helper는 상위 요소인 초기에 정의된 드래그 가능 항목과 동일한 컨테이너를 사용합니다.
[코드 예]
[초기화]
$( '.selector').draggable ({appendTo: 'body' });
[속성 값 가져오기]
//getter
varappendTo = $('.selector').draggable('option' , 'appendTo');
[속성 값 설정]
//setter
$('.selector').draggable('option', 'appendTo', 'body');.
axis:
[Type ]String, Boolean (사용 가능한 값은 'x', 'y', false)
'x': 가로로만 드래그 가능
'y': 드래그만 가능 수직
false: 둘 다 가능합니다. 수평, 수직으로 드래그할 수도 있습니다.
[기본값] false, 드래그 방향을 제한하지 않습니다
[영향]
드래그하는 동안 방향을 제한합니다.
[코드 예]
[초기화]
$('.selector').draggable({ axis: 'x' });
[속성 값 가져오기]
var axis = $( '.selector').draggable( 'option', 'axis');
[속성 값 설정]
$('.selector').draggable('option', 'axis', 'x') ;
취소:
[유형] 선택기
[기본값]':input, option'
[영향]
선택기를 통해 이 유형의 요소를 지정하면 드래그 가능한 컨트롤로 렌더링될 수 없습니다. .
[코드 예]
[초기화]
$('.selector').draggable({ cancel: 'button' });
[속성 값 가져오기]
var cancel = $('.selector'). draggable('option', 'cancel');
[속성 값 설정]
$('.selector').draggable('option', 'cancel', 'button ');
connectToSortable: 이 옵션은 sortable과 함께 작동해야 하며
[Type] 선택기
[기본값]':input, option'
[Impact]에 대해 다시 설명합니다.
선택기를 통해 이 유형의 요소를 지정하면 드래그 가능한 컨트롤로 렌더링할 수 없습니다.
[코드 예]
[초기화]
$('.selector').draggable({ 취소: '버튼' });
[속성 값 가져오기]
var cancel = $('.selector').draggable('option', 'cancel');
[속성 값 설정]
$('. selector').draggable('option', 'cancel', 'button');
포함:
[유형] 선택기, 요소, 문자열, 배열.
선택기: 선택만 가능 컨테이너에 의해 제한된 요소
요소: 지정된 요소 내에서만 드래그할 수 있습니다.
문자열:
parent: 상위 컨테이너 내에서만 드래그할 수 있습니다.
문서: 현재 html 문서에서 요소 아래로 드래그할 수 있습니다. 문서. 브라우저 창의 범위를 벗어나면 자동으로 스크롤바가 나타납니다.
Widow: 현재 브라우저 창의 범위를 벗어나는 콘텐츠 영역에서만 드래그할 수 있습니다. ..
배열: [x1, y1, x2, y2]는 [가로 좌표 시작, 세로 좌표 시작, 가로 좌표 끝, 세로 좌표 끝] 형식으로 영역을 구분하며, 이 영역 내에서 드래그됩니다. 이렇게 지정하면 값은 현재 브라우저 창의 콘텐츠 영역 왼쪽 상단을 기준으로 한 오프셋 값입니다.
false: 드래그의 활성 범위를 제한하지 않습니다
[기본값]false
[영향]
지정된 드래그 가능한 컨트롤의 활성 영역에 영향을 줍니다.
[코드 예]
[초기화]
$('.selector' ).draggable({ containment: 'parent' });
[속성 값 가져오기]
var containment = $('.selector').draggable('option', 'containment');
[ 속성 값 설정]
$('.selector').draggable ('option', 'containment', 'parent');
cursor:
[Type] string.
[기본값] 'auto'
[영향]
영향 사양 드래그 프로세스 중 드래그 가능한 컨트롤의 마우스 스타일입니다. 이 스타일을 설정한 후 컨트롤의 원래 요소는 지정된 커서 스타일을 지원해야 합니다. 지정된 값이 지정된 커서 스타일을 지원하지 않으면 원래 요소의 기본 커서 스타일이 사용됩니다. 예를 들어 $('input[type=button]').draggable({cursor: 'crosshair' }); 버튼은 십자선 마우스 스타일을 지원하지 않으므로 기본 형식으로 표시됩니다.
[코드 예]
[초기화]
$('.selector').draggable({ 커서: '십자선' });
[속성 값 가져오기]
varcursor = $('.selector').draggable(' option', 'cursor');
[속성 값 설정]
$(' .selector').draggable('option', 'cursor', 'crosshair');
cursorAt:
[Type] Object
개체의 위쪽, 왼쪽, 위쪽 중 하나 또는 두 개를 설정하여 위치를 결정합니다. 오른쪽, 아래쪽 속성값.
[기본값]false
[영향력]
컨트롤을 드래그하는 동안 컨트롤에 표시되는 마우스 위치 값이 false일 때. ), 마우스 위치는 드래그를 시작하기 위해 클릭한 위치가 됩니다. 설정하면 컨트롤 자체의 왼쪽 상단에서 오프셋됩니다(예: $('.selector').draggable('option). ', 'cursorAt', {left: 8, top: 8}); 그런 다음 드래그하는 동안 마우스는 아래쪽에서 오른쪽으로 8픽셀씩 왼쪽 상단으로 이동합니다.
[코드 예]
[초기화]
$('.selector').draggable({ 커서: 'crosshair' });
[속성 값 가져오기]
var 커서 = $('.selector'). draggable('option', 'cursor');
[속성 값 설정]
$('.selector').draggable(' option', 'cursor', 'crosshair');
delay:
[유형] 정수, 단위는 밀리초
[기본값]0
[영향]
드래그 가능 제어 마우스 왼쪽 버튼을 누른 시점부터 드래그 효과까지의 지연을 사용할 수 있습니다. 원하지 않는 클릭으로 인해 발생하는 잘못된 드래그를 방지하기 위한 구체적인 효과는 다음과 같습니다. 마우스 왼쪽 버튼을 누른 시점부터 지연으로 지정된 시간까지 마우스 왼쪽 버튼을 놓지 않은 경우 드래그가 유효한 것으로 간주됩니다. , 그렇지 않으면 드래그가 유효하지 않은 것으로 간주됩니다.
[코드 예]
[초기화]
$('.selector').draggable({ Delay: 500 });
[속성 값 가져오기]
var Delay = $('.selector').draggable('option', 'delay');
[속성 값 설정]
$('.selector').draggable('option', 'delay', 500);
거리:
[유형] 정수, 단위는 픽셀
[기본값]1
[효과]
드래그 가능한 컨트롤은 마우스 왼쪽 버튼을 누를 때부터 시작됩니다. 드래그 효과가 생성될 때 마우스를 움직여야 합니다. 이 옵션은 예상되는 클릭으로 인해 발생하는 원치 않는 잘못된 드래그를 방지하는 데 사용할 수 있습니다. 구체적인 효과는 마우스 왼쪽 버튼을 누른 후 한 번 드래그하는 것입니다. 마우스로 생성된 거리가 지정된 값에 도달하면 유효한 드래그로 간주됩니다.
[ 코드 예]
[초기화]
$('.selector').draggable({ distance: 30 });
[속성 값 가져오기]
var distance = $('.selector').draggable('option', 'distance');
[속성 값 설정]
$('. selector').draggable('option', 'distance', 30);
grid:
[type] array [x, y], x는 가로 크기를 나타내고, y는 세로 크기를 나타내며, 단위는 픽셀
[기본값]false
[영향]
드래그 가능한 컨트롤은 그리드 방식으로 드래그됩니다. 즉, 드래그 프로세스 중 단위는 지정된 배열에서 설명하는 그리드만큼 큽니다. guid 옵션으로 .
[코드 예]
[초기화]
$('.selector').draggable({grid: [50, 20] });
[속성 값 가져오기]
var Grid = $('.selector').draggable('option', 'grid');
[속성 값 설정]
$('.selector').draggable('option', 'grid', [50, 20]);
handle:
[type] 선택기 또는 요소
[기본값]false
[효과]
드래그를 트리거하는 요소를 지정합니다. : id=window인 div는 드래그 가능한 컨트롤로 설정되고 해당 핸들은 div에서 id=title인 범위로 설정됩니다. 그러면 id=title인 범위를 클릭하고 드래그하는 것만 유효합니다. 드래그 가능한 컨트롤의 하위 요소여야 합니다.
[코드 예]
[초기화]
$('.selector').draggable({ handler: 'h2' });
[Get 속성 값]
var handler = $('.selector').draggable('option', 'handle');
[속성 값 설정]
$('.selector').draggable (' option', 'handle', 'h2');
helper:
[Type] 문자열 또는 함수
문자열 값:
'original': 드래그 가능한 컨트롤 자체를 이동할 수 있습니다.
' clone': 드래그 가능한 컨트롤 자체를 복제하고 이동하며 원래 위치는 변경되지 않습니다.
함수는 DOM 요소를 반환해야 합니다. 함수에서 반환된 DOM 요소 이동을 사용하여 드래그 프로세스를 표시합니다.
[기본값] 'original'
[Influence]
드래그 과정 중 현재 드래그 위치를 사용자가 알 수 있도록 도와주는 요소.
[코드 예시]
[초기화]
$(' .selector' ).draggable({ helper: 'clone' });
[속성 값 가져오기]
var helper = $('.selector').draggable('option', 'helper');
[ 속성 값 설정]
$('.selector').draggable('option', 'helper', 'clone');
iframeFix:
[유형] 부울 값 또는 선택기, 선택 결과 선택기는 iframe 요소여야 합니다.
[기본값] false
[impact]
이렇게 하면 드래그 프로세스 중에 마우스 포인터가 iframe 영역에서 이동하는 것을 방지하고 마우스 이동 이벤트에 대한 iframe의 기본 응답을 방지할 수 있습니다. .
true로 설정하면 드래그 프로세스 중 현재 페이지의 모든 iframe의 mousemove 이벤트가 차단됩니다. 선택기가 설정된 경우 지정된 iframe의 mousemove 이벤트가 차단됩니다.
[코드 예시 ]
[초기화]
$('.selector').draggable({ iframeFix: true });
[속성 값 가져오기]
var iframeFix = $('.selector').draggable ('option' , 'iframeFix');
[속성 값 설정]
$('.selector').draggable('option', 'iframeFix', true);
불투명도:
[유형] 부동 소수점 값
[기본값]false
[영향]
드래그 중 도우미(드래그할 때 마우스를 따라가는 컨트롤)의 불투명도.
[코드 예]
[ 초기화]
$('.selector').draggable({ 불투명도: 0.35 });
[속성 값 가져오기]
var opacity = $('.selector').draggable('option ', 'opacity');
[속성 값 설정]
$('.selector').draggable('option', 'opacity', 0.35);
refreshPositions:
[Type] 부울
[기본값]false
[영향력]
true로 설정하면 각 마우스 이동 이벤트에서 놓을 수 있는 모든 위치가 계산됩니다.
참고: 이 옵션은 주로 고급 동적 페이지를 해결하는 데 사용됩니다. 문제가 있으니 주의해서 사용하세요.
[코드 예]
[초기화]
$('.selector').draggable({refreshPositions: true });
[속성 값 가져오기]
varrefreshPositions = $('.selector').draggable('option', 'refreshPositions');
[속성 값 설정]
$('.selector').draggable('option', 'refreshPositions ' , true);
revert:
[Type]Boolean, String
[기본값]false
[Influence]
드래그 후 원래 위치로 돌아갈지 여부에 영향을 줍니다.
true: 각 드래그가 중지된 후 요소는 자동으로 원래 위치로 돌아갑니다.
'invalid': 놓기 가능하고 성공적으로 놓지 않는 한 요소는 원래 위치로 돌아오지 않습니다.
'valid'. : 유효하지 않은 경우를 제외한 기타 상황.
[코드 예]
[초기화]
$('.selector').draggable({ revert: true });
[속성 값 가져오기]
var revert = $('.selector').draggable('option', 'revert');
[속성 값 설정]
$('. selector').draggable('option', 'revert', true);
revertDuration:
[유형] 정수
[기본값]500
[효과]
되돌리기(다음으로 돌아가기) 단위는 밀리초입니다. 되돌리기 옵션이 false로 설정된 경우 이 속성은 무시됩니다.
[코드 예]
[초기화]
$('.selector') .draggable( { revertDuration: 1000 });
[속성 값 가져오기]
var revertDuration = $('.selector').draggable('option', 'revertDuration');
[속성 값 설정 ]
$('.selector').draggable('option', 'revertDuration', 1000);
범위:
[유형] 문자열
[기본값]'기본값'
[영향]
이 옵션은 범위를 설명하며 동일한 이름의 droppable 옵션과 함께 사용됩니다. droppable의 허용 옵션은 허용되는 드래그 가능한 컨트롤을 설정하는 데 사용됩니다. 동일해야 합니다. 범위 내의 드래그 앤 드롭만 서로 드래그 앤 드롭할 수 있습니다.
예:
$('#draggable_a').draggable({scope: 'a'});
$ ('#draggable_b') .draggable({scope: 'b'});
$('#droppable_a').droppable({scope: 'a'});
$('#droppable_b') .droppable({scope: 'b'});
droppable 컨트롤의 accept 옵션은 기본적으로 '*'입니다. 그러나 draggable_a 및 draggable_b는 범위 제약으로 인해 자유롭게 배치될 수 있는 것 같습니다. , draggable_a는 droppable_a에만 배치할 수 있고, draggable_b는 droppable_b에만 보낼 수 있습니다.
참고: 이 옵션은 변수의 네임스페이스와 비슷한 의미를 갖습니다. 기본값은 'default'입니다. 모든 사람은 여전히 ​​범위를 갖고 있으며 이름은 기본값입니다.
[코드 예]
[초기화]
$('.selector').draggable({ 범위: 'tasks' });
[속성 값 가져오기]
var range = $('.selector').draggable('option', 'scope');
[속성 값 설정]
$('.selector') .draggable('option', 'scope', 'tasks');
scroll:
[Type]Boolean
[기본값]true
[Effect]
true로 설정하면, 드래그 프로세스 중에 드래그 가능한 컨트롤 컨테이너가 초과됩니다. , 컨테이너는 자동으로 스크롤 막대를 추가합니다
[코드 예]
[초기화]
$('.selector').draggable({ 스크롤: false });
[속성 값 가져오기]
var range = $('.selector').draggable('option', 'scope');
[속성 값 설정]
$(' .selector').draggable('option', ' scroll', false);
scrollSensitivity:
[유형] 정수 값
[기본값] 20
[효과]
민감도
아래에 속하는 마우스 포인터는 드래그 가능한 컨트롤이 이동하는 동안 마우스의 위치를 ​​의미합니다.
마우스 포인터와 드래그 가능한 컨트롤이 위치한 컨테이너 가장자리 사이의 거리를 말합니다.
[코드 예]
[ 초기화]
$('.selector').draggable({ scrollSensitivity: 40 });
[속성 가져오기] 값]
var scrollSensitivity = $('.selector').draggable('option', 'scrollSensitivity');
[속성 값 설정]
$('.selector').draggable('option ', 'scrollSensitivity', 40);
scrollSpeed:
[type] 정수 값
[기본값]20
[Impact]
scrollSensitivity로 인해 스크롤이 발생할 때 몇 픽셀이 스크롤 막대는 한 번에 스크롤됩니다.
[코드 예]
[초기화]
$('.selector').draggable({ scrollSpeed: 40 });
[속성 값 가져오기]
var scrollSpeed ​​​​= $('.selector').draggable('option', 'scrollSpeed')
[속성 값 설정]
$('.selector').draggable('option', 'scrollSpeed', 40);
snap:
[Type]Boolean, selector
[기본값]false
[Effect]
흡착 기능, true로 설정하는 것은 selector.ui-draggable. 특정 효과는 선택기에 의해 지정된 모든 요소에 적용되며 현재 드래그 가능한 컨트롤은 드래그 프로세스 중에 구성 요소가 대상 구성 요소에 가깝지만 아직 닿지 않은 경우 흡착 기능을 구현할 수 있습니다. , 드래그 중인 구성요소가 자동으로 빨려들어갑니다.
[코드 예]
[초기화]
$( '.selector').draggable({ snap: true });
[속성 가져오기 value]
var snap = $('.selector').draggable('option', 'snap');
[속성 값 설정]
$('.selector').draggable('option ', 'snap', true);
snapMode:
[Type] 문자열, 선택값은 다음과 같습니다
'inner': 지정된 요소 내부에 흡착 가능
'outer' : 지정된 원소 외부에 흡착 가능
'모두' : 내부, 외부 모두 흡착 가능.
[기본값]'모두'
[영향력]
스냅 시 모드를 설정합니다.
[코드 예]
[초기화]
$('.selector').draggable({ snapMode: 'outer' });
   [获取属性值]
   var snapMode = $('.selector').draggable('option', 'snapMode');
   [设置属性值]
   $('.selector').draggable('option', 'snapMode', 'outer');
snapTolerance:
[类型]整数
[默认值]20
[产生影响]
   设定离目标对象的边多少像素的时候, 进行吸附.
[代码示例]
   [初始化]
   $('.selector').draggable({ snap: true });
   [获取属性值]
   var snap = $('.selector').draggable('option', 'snap');
   [设置属性值]
   $('.selector').draggable('option', 'snap', true);
stack:
[类型]对象{group: '.selector', min: 50}
[默认值]false
[产生影响]
   一次初始化一组draggable控件的时候, 将其中的一些draggable控件以给定选择器选择, 作为一组, 这时, 这一组draggable控件就可以实现当前被拖动的始终在最前效果, min用来指定这一组的z-index值的最小值.
[代码示例]
   [初始化]
   $('.selector').draggable({ stack: { group: 'products', min: 50 } });
   [获取属性值]
   var stack = $('.selector').draggable('option', 'stack');
   [设置属性值]
   $('.selector').draggable('option', 'stack', { group: 'products', min: 50 });
zIndex:
[类型]整数
[默认值]false
[产生影响]
   拖动时的helper(跟随鼠标移动的控件)的z-index值. z-index就是css中的层叠层数, 数值越大, 越在上层.
[代码示例]
   [初始化]
   $('.selector').draggable({ zIndex: 2700 });
   [获取属性值]
   var zIndex = $('.selector').draggable('option', 'zIndex');
   [设置属性值]
   $('.selector').draggable('option', 'zIndex', 2700);
[事件]
start: 拖动开始, 指鼠标按下, 开始移动.
[类型]dragstart
[回调函数接受的参数]
   event: 原生的浏览器事件.
   ui: JQuery的ui对象
   this: 当前拖动的控件DOM对象
drag: 拖动过程中鼠标移动.
[类型]drag
[回调函数接受的参数]
   event: 原生的浏览器事件.
   ui: JQuery的ui对象
   this: 当前拖动的控件DOM对象
stop: 拖动结束.
[类型]dragstop
[回调函数接受的参数]
   event: 原生的浏览器事件.
   ui: JQuery的ui对象
   this: 当前拖动的控件DOM对象
[代码示例]
初始化时设置事件.
$('.selector').draggable({
     start: function(event, ui) { alert(this); },
     drag: function(event, ui) { alert(this); },
     stop: function(event, ui) { alert(this); }
});
动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.
$(".selector").bind('dragstart', function(event, ui) {
   alert(this);
});
$(".selector").bind('drag', function(event, ui) {
   alert(this);
});
$(".selector").bind('dragstop', function(event, ui) {
   alert(this);
});
[方法]
destroy: 完全移除一个可拖动控件, 使其回退到该元素被初始化成可拖动控件之前的状态.
[代码示例]
   $(".selector").progressbar('destroy');
将之前初始化的.selector指定的可拖动控件销毁, 使其返回初始化之前的状态.
disable: 将可拖动控件样式改变成为失效, 与enable对应.
enable: 将可拖动控件样式改变为允许, 与disable对应.
option: 获取或设置可拖动控件的选项, 第二个参数是选项名, 第三个参数是值. 如果不指定值, 就是获取, 指定值, 就是设置.

[요약]
addClasses: UI 드래그 가능 스타일 추가 여부를 설정하는 데 사용됩니다.
appendTo: 추가할 위치 설정
axis: 드래그 가능 설정 style 이동 방향
cancel, 핸들: 전체 컨트롤의 드래그 동작을 제어하는 ​​영역을 설정합니다. cancel은 드래그할 수 없는 영역을 지정하고, 핸들은 컨트롤의 드래그를 제어하는 ​​영역을 지정합니다.
connectToSortable: sortable과 통합되어야 합니다.
containment: 컨트롤의 드래그 가능 범위를 설정합니다
cursor,cursorAt: 드래그 프로세스 중 공간 자체를 기준으로 마우스 스타일과 위치를 설정합니다.
delay, distance: 드래그의 지연을 설정하고, Delay는 지연 시간을 설정하고, distance는 지연을 설정합니다.
grid: 드래그 과정 중 이동 단위를 설정합니다(작은 그리드에서 이동).
helper: 드래그 과정 중 마우스 움직임을 따라가는 단위를 설정합니다.
iframeFix: 드래그 중 iframe 오버레이 후 이벤트 문제를 해결합니다.
opacity: 드래그 중 도우미의 불투명도.
refreshPositions: 설정 후 드롭 프로세스 동안 모든 마우스 움직임이 위치로 계산됩니다.
revert, revertDuration: 이동 취소와 관련된 설정.
scope: 드래그 가능한 도메인을 설정하며, 가능한 대상을 결정하는 데 사용됩니다. droppable과 함께 사용할 때 배치됩니다.
scroll, scrollSensitivity, scrollSpeed: 드래그 가능 설정 애니메이션 프로세스 중 발생하는 스크롤 바와 관련된 문제.
snap, snapMode, snapTolerance: 스내핑과 관련된 속성을 설정합니다.
stack, zIndex : 컨트롤의 레벨을 설정합니다.