[jquery-ui] 드래그 앤 드롭 옵션 정리 - draggable편

드래그 앤 드롭같이 인터렉션한 기능들은 제이쿼리를 빼놓고 하기엔 크로스 브라우징 등의 문제로 쉽지가 않음. 기본적으로 jquery와 jquery ui를 각각 추가해주고 작업하면 된다. 주로 쓸만한 것 위주로 정리함.

 

https://api.jqueryui.com/draggable/

Draggable Widget | jQuery UI API Documentation

 

+해당 포스팅은 언제든지 수정될 수 있음

 

 

1. 기본

<div class="item-box">
  <div class="item"></div>
</div>

$('.item').draggable({});

드래그가 가능한 기본형.

 

 

2. 특정 요소만 드래그 제한(cancel)

<div class="item-box">
  <div class="item"></div>
  <div class="item wood2"></div>
</div>

$('.item').draggable({
  cancel: '.wood2'
});

기본적으로 input, select, textarea, button, option은 드래그할 수 없음. 근데 이뿐만이 아니라 어떤 특정 요소를 드래그 할 수 없게 만들고 싶을때 위와 같은 방법을 쓰면 된다.

 

 

3. 추가 클래스 넣기(classes)

$('.item').draggable({
  classes: {
    "ui-draggable-dragging": "decayed"
  }
});

기본 테마(클래스)에 원하는 클래스를 추가할 수 있음.

위 코드는 드래그 중인 요소에게 .decayed라는 클래스를 붙여라는 의미임.

 

기본 테마(클래스)는 총 4개가 있음.

ui-draggable (드래그 가능한 요소)

ㄴ ui-draggable-disabled (드래그 불가능한 요소)

ㄴ ui-draggable-dragging (드래그 중인 요소)

ui-draggable-handle (드래그 가능한 요소 - 핸들러)

 

마지막에 handle과 draggable이 무슨 차이냐고 한다면 아래 설명하겠음.

 

 

4. 특정 요소를 끌어야 드래그되게 하기(handle)

<div class="item-box">
  <div class="item"><span></span></div>
</div>

$('.item').draggable({
  handle: 'span',
});

기본적으로 .item은 드래그 가능한 요소지만, handle이 span으로 잡혀있다면 이제 item 내 span이라는 요소를 마우스로 끌어야 드래그가 가능함. 예를들어 손잡이 부분을 드래그 했을때 드래그되게 해주세요라고 했을 때 유용하게 쓰임.

 

 

5. 특정 위치 위에서만 드래그되게 하기(containment)

<div class="wrap">
  <div class="item-box">
    <div class="item"></div>
  </div>
  <div class="item-box"></div>
</div>

$('.item').draggable({
  containment: ".wrap"
});

초록색이 .wrap인데 이를 containment에 지정해두면 드래그 요소는 그 안에서만 왔다갔다 할 수 있지 외부로는 나가지 못함.

 

 

6. 드래그할때 커서 모양/위치 바꾸기(cursor)

$('.item').draggable({
  cursor: "crosshair",
  cursorAt: {top: -5, left: -5}
});

 

 

7. 드래그 비활성화(disabled)

$('.item').draggable({
  disabled: true
});

 

 

8. 분신술(helper)

$('.item').draggable({
  helper: 'clone',
});

보면 드래그할 때 원래 위치에 아이템이 남아있고 다른 복제된 요소가 드래그로 이동하는 것을 볼 수 있음.

 

 

9. 드래그할 때 불투명(opacity)

$('.item').draggable({
  opacity: 0.5
});

 

 

 

10. 마우스 놨을 때 원래 자리로 돌아가기(revert)

$('.item').draggable({
  revert: true,
  revertDuration: 200
});

기본 시간은 500이고 revertDuration을 활용하여 원하는 시간으로 변경 가능함.

참고로 revert는 함수로도 사용이 가능한데, 원하는 영역에 드래그해서 두었을때 안돌아가게도 할 수 있음.

 

 

11. 원하는 요소에 가까이 가면 딱 붙기(snap)

$('.item').draggable({
  snap: '.drop',
});

해당 이름을 가진 element 근처에 갖다대면 쏙하고 붙음. spanMode를 활용하여 outer, inner 등 위치도 지정해줄 수 있음.

 

 

12. 같은 유형 설정하기(scope)

<div class="item-box">
  <div class="item item1"></div>
  <div class="item item2"></div>
</div>

<div class="box"></div>

$('.item').draggable();

$('.item1').draggable({
  scope: 'wood'
});

$('.box').droppable({
  scope: 'wood',
  over: function(event, ui) {
    $(this).css("background-color", "lightgreen");
  }
});

원하는 아이템과 영역에 scope로 같은 유형임을 설정하면, 나중에 같은 유형끼리 드래그/오버 등을 했을 때 이벤트를 발생하게 할 수 있음.

 

여기서 droppable은 놓을 수 있는 element를 설정함. 관련된 내용은 다음 포스팅에 설명함.