09. Vue 2 - vuedraggable 2.24

OS	Windows 10 Home 64bit 버전 1903 (OS 빌드 18362.836)
Vue	2.5.13

 

# 공식 깃 허브

SortableJS/Vue.Draggable

 

-- web demo

vuedraggable

 

-- full demo

David-Desmaisons/draggable-example

 

# 설명

<draggable> 속성
v-model	연결 할 Array 타입 [vue]
:list	연결 할 Array 타입 [vuedraggable]
animation	애니메이션 딜레이 (1000 = 1초)
tag	tag 명을 지정 (기본 div)
draggable	드래그 사용여부 (boolean 또는 class 명)   boolean 자기자신 영역 드래깅   class 명은 하위 태그의 클래스명 영역 드래깅
ghost-class	드래깅 되어 이동되는 고스트 클래스명 지정
handle	드래그를 핸들링할 영역 지정
scrollSensitivity	스크롤 감도
touchStartThreshold	터치 임계값
group	드래그 그룹명 (같은 그룹명인 경우 이동가능)
:group	드래그 그룹명 (중첩 리스트 할 때 사용)   :group=" {name: '' } "
:disabled	드래그 이벤트 사용여부
:move	드래깅 상태에서 움직였을 때 발생
:options	{draggable: '', group: '', ghostClass: ''} 등 모든 옵션
@start	드래그 시작 시 이벤트 처리
@end	드래그 종료 시 이벤트 처리
@change	연결 된 리스트가 변경될 시 이벤트 처리

 

<transition-group> 속성
type	타입 (transition)
name	이름 (트랜지션 적용할 클래스명을 지정할 때 사용)

<transition-group name="cutom-list">
    <li></li>
    <li></li>
    <li></li>
</transition-group>

<style>
    .custom-list-move {
	    transition: transform 0.5s
    }
</style>

 

<draggable> 내부 태그 속성정의
slot="header"	드래깅 이벤트를 제외하며, 항상 맨 위에 위치 시킨다
slot="footer"	드래깅 이벤트를 제외하며, 항상 맨 아래에 위치 시킨다

 

:options

속성이 여러개 인 경우 어떤 것이 드래깅 이벤트를 담당하는 속성인지 구분하기 어렵기 때문에

:option {} 속성을 사용하여 속성들을 관리하는 것이 코드 가독성에 좋다

var sortable = new Sortable(el, {
  // variables

  group: "name", // or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
  sort: true, // 목록 내부 정렬
  delay: 0, // 정렬이 시작되어야하는 시간을 정의하는 시간 (밀리 초)
  delayOnTouchOnly: false, // 사용자가 터치를 사용하는 경우에만 지연
  touchStartThreshold: 0, // px, 지연된 드래그 이벤트를 취소하기 전에 포인트가 이동해야하는 픽셀 수
  disabled: false, // true로 설정된 경우 정렬 가능을 비활성화합니다
  store: null, // @see Store
  animation: 150, // ms, 정렬시 애니메이션 속도 이동 항목,`0 '— 애니메이션 없음
  easing: "cubic-bezier(1, 0, 0, 1)", // 애니메이션 완화. 기본값은 null입니다. 예는 https://easings.net/을 참조하세요.
  handle: ".my-handle", // 목록 항목 내에서 핸들 선택기 드래그
  filter: ".ignore-elements", // 드래그로 이어지지 않는 선택기 (String or Function)
  preventOnFilter: true, // `filter`가 트리거되면`event.preventDefault ()`호출
  draggable: ".item", // 요소 내에서 드래그 할 수있는 항목을 지정합니다.

  dataIdAttr: "data-id",

  ghostClass: "sortable-ghost", // 놓을 장소의 클래스명 지정
  chosenClass: "sortable-chosen", // 선택 항목의 클래스명 지정
  dragClass: "sortable-drag", // 드래그하는 항목의 클래스명 지정

  swapThreshold: 1, // 스왑 영역의 임계 값
  invertSwap: false, // true로 설정하면 항상 반전 된 스왑 영역을 사용합니다.
  invertedSwapThreshold: 1, // 반전 된 스왑 영역의 임계 값 (기본적으로 swapThreshold 값으로 설정 됨)
  direction: "horizontal", // 정렬 가능 방향 (지정하지 않으면 자동으로 감지 됨)

  forceFallback: false, // HTML5 Drage & Drop 동작을 무시하고 대체를 강제로 시작합니다.

  fallbackClass: "sortable-fallback", // forceFallback을 사용할 때 복제 된 DOM 요소의 클래스 이름
  fallbackOnBody: false, // 복제 된 DOM 요소를 문서의 본문에 추가합니다.
  fallbackTolerance: 0, // 드래그로 간주되기 전에 마우스가 이동해야하는 거리를 픽셀 단위로 지정합니다.

  dragoverBubble: false, // 드래그 오버 버블 (이벤트 버블링 여부)
  removeCloneOnHide: true, // 표시되지 않는 복제 요소를 숨기는 대신 제거하십시오.
  emptyInsertThreshold: 5, // px, 드래그 요소를 삽입하려면 마우스가 비어 있어야합니다.

  // handlers/hooks - 여기에서 정렬 가능한 이벤트를 듣습니다.

  setData: function (
    /** DataTransfer */ dataTransfer,
    /** HTMLElement*/ dragEl
  ) {
    dataTransfer.setData("Text", dragEl.textContent); // HTML5 DragEvent의`dataTransfer` 객체
  },

  // 요소 선택 시
  onChoose: function (/**Event*/ evt) {
    evt.oldIndex; // 부모 내의 요소 색인
  },

  // 요소 선택취소 시
  onUnchoose: function (/**Event*/ evt) {
    // onEnd와 동일한 속성
  },

  // 요소 드래그 시작 시
  onStart: function (/**Event*/ evt) {
    evt.oldIndex; // 부모 내의 요소 색인
  },

  // 요소 드래그 종료 시
  onEnd: function (/**Event*/ evt) {
    var itemEl = evt.item; // 드래그 된 HTMLElement
    evt.to; // target 리스트
    evt.from; // previous 리스트
    evt.oldIndex; // 이전 부모 내 요소의 이전 색인
    evt.newIndex; // 새 부모 내 요소의 새 색인
    evt.oldDraggableIndex; // 이전 부모 내의 요소의 이전 색인, 드래그 가능한 요소 만 계산
    evt.newDraggableIndex; // 새 부모 내 요소의 새 색인, 드래그 가능한 요소 만 계산
    evt.clone; // 복제 요소
    evt.pullMode; // 항목이 다른 정렬 가능에있을 때 : 복제하는 경우` "clone"`, 이동하는 경우`true '
  },

  // 요소가 다른 목록의 목록으로 드롭 시
  onAdd: function (/**Event*/ evt) {
    // onEnd와 동일한 속성
  },

  // 리스트 내 정렬 변경 시
  onUpdate: function (/**Event*/ evt) {
    // onEnd와 동일한 속성
  },

  // 리스트가 변경될 시 (add / update / remove)
  onSort: function (/**Event*/ evt) {
    // onEnd와 동일한 속성
  },

  // 요소가 리스트에서 다른 리스트로 이동되어 제거 될 시
  onRemove: function (/**Event*/ evt) {
    // onEnd와 동일한 속성
  },

  // 필터링 된 요소 드래그 시도 시
  onFilter: function (/**Event*/ evt) {
    var itemEl = evt.item; // `mousedown | tapstart` 이벤트를 수신하는 HTMLElement.
  },

  // 리스트에서 항목을 이동하거나 리스트 간에 이동할 때 발생하는 이벤트
  onMove: function (/**Event*/ evt, /**Event*/ originalEvent) {
    // Example: https://jsbin.com/nawahef/edit?js,output
    evt.dragged; // 드래그 된 HTMLElement
    evt.draggedRect; // DOMRect {왼쪽, 위쪽, 오른쪽, 아래쪽}
    evt.related; // 안내 한 HTMLElement
    evt.relatedRect; // DOMRect
    evt.willInsertAfter; // Sortable이 기본적으로 대상 뒤에 끌기 요소를 삽입하는 경우 true 인 부울
    originalEvent.clientY; // 마우스 위치
    // return false; — 취소
    // return -1; — target 앞에 삽입
    // return 1; — target 뒤에 삽입
    // return true; — 방향에 따라 기본 삽입 위치 유지
    // return void; — 방향에 따라 기본 삽입 위치 유지
  },

  // 요소의 복제본을 만들 시
  onClone: function (/**Event*/ evt) {
    var origEl = evt.item;
    var cloneEl = evt.clone;
  },

  // 요소를 드래깅하여 위치가 변경 될 때 호출됩니다.
  onChange: function (/**Event*/ evt) {
    evt.newIndex; // 이 이벤트가 사용되는 대부분의 이유는 드래그하는 요소의 현재 색인을 가져 오는 것입니다.
    // onEnd와 동일한 속성
  },
});

 

# 깃 허브 내용중