이 영역을 누르면 첫 페이지로 이동
나눔코딩 블로그의 첫 페이지로 이동

나눔코딩

페이지 맨 위로 올라가기

나눔코딩

09. Vue 2 - vuedraggable 2.24

  • 2020.09.24 02:58
  • 16. Vue JS/Vue 2
OS Windows 10 Home 64bit 버전 1903 (OS 빌드 18362.836)
Vue 2.5.13

 

# 공식 깃 허브
 

SortableJS/Vue.Draggable

Vue drag-and-drop component based on Sortable.js. Contribute to SortableJS/Vue.Draggable development by creating an account on GitHub.

github.com

 

-- web demo

 

vuedraggable

 

sortablejs.github.io

 

-- full demo

 

David-Desmaisons/draggable-example

vue.draggable example. Contribute to David-Desmaisons/draggable-example development by creating an account on GitHub.

github.com

 

# 설명
<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와 동일한 속성
  },
});

 

# 깃 허브 내용중

저작자표시 (새창열림)

'16. Vue JS > Vue 2' 카테고리의 다른 글

11. Vue 2 - SockJS  (0) 2020.09.29
10. Vue 2 - json-viewer  (0) 2020.09.24
08. Vue 2 - Router 현재 페이지 갱신  (0) 2020.09.23
07. Vue 2 - logger 플러그인  (0) 2020.09.23
06. Vue 2 - TerserPlugin 을 이용한 웹 팩 설정  (0) 2020.09.23

댓글

이 글 공유하기

  • 구독하기

    구독하기

  • 카카오톡

    카카오톡

  • 라인

    라인

  • 트위터

    트위터

  • Facebook

    Facebook

  • 카카오스토리

    카카오스토리

  • 밴드

    밴드

  • 네이버 블로그

    네이버 블로그

  • Pocket

    Pocket

  • Evernote

    Evernote

다른 글

  • 11. Vue 2 - SockJS

    11. Vue 2 - SockJS

    2020.09.29
  • 10. Vue 2 - json-viewer

    10. Vue 2 - json-viewer

    2020.09.24
  • 08. Vue 2 - Router 현재 페이지 갱신

    08. Vue 2 - Router 현재 페이지 갱신

    2020.09.23
  • 07. Vue 2 - logger 플러그인

    07. Vue 2 - logger 플러그인

    2020.09.23
다른 글 더 둘러보기

정보

나눔코딩 블로그의 첫 페이지로 이동

나눔코딩

  • 나눔코딩의 첫 페이지로 이동

검색

메뉴

  • 홈
  • 태그
  • 방명록

카테고리

  • 분류 전체보기 (316)
    • ∞. 읽은 거리 (3)
    • ∞. 기술 면접 (61)
      • 1. 자료구조 (0)
      • 2. 네트워크 (9)
      • 3. 운영체제 (11)
      • 4. 데이터베이스 (13)
      • 5. 디자인 패턴 (0)
      • 6. 알고리즘 (0)
      • 7. 자바 (15)
      • 8. 자바스크립트 (7)
      • 9. 스프링 (5)
      • 10. 시큐리티 (1)
      • 11. 기타 (0)
      • 12. Vue (0)
    • ∞. 웹개발 유용한 사이트 (14)
    • ∞. 트러블 슈팅 + TIL (7)
    • 00. 출발 (9)
    • 01. 엑셀 (9)
      • 기초 (4)
      • 컴활 1급 (4)
      • VBA (0)
    • 02. 엑세스 (9)
      • 기초 (5)
      • 컴활 1급 (4)
    • 04. Oracle (1)
      • 기초 (1)
    • 03. JAVA (8)
      • 기초 (7)
      • 객체지향 프로그래밍 (0)
    • 05. HTML (13)
      • 기초 (1)
      • css (10)
      • sass (0)
      • less (0)
    • 06. Javascript (16)
      • 기초 (13)
      • ES6 모듈 (2)
      • Canvas (0)
    • 07. JSP (0)
      • 기초 (0)
    • 08. jQuery (0)
      • 기초 (0)
    • 09. BootStrap (1)
      • 기초 (0)
      • v4 - Layout (1)
    • 10. Spring (30)
      • 기초 (3)
      • 실험 (4)
      • MVC (1)
      • BOOT (6)
      • Security (10)
      • Lib (Library) (2)
      • 벤치마킹 (0)
      • JUnit5 (2)
      • DevTools (0)
      • Socket (1)
      • Batch (0)
      • Mobile (0)
      • WebFlux (0)
      • Cloud (0)
      • Thymleaf (0)
      • Actuator (0)
      • 성능 테스트 (1)
    • 11. JetBrains (34)
      • 기초 (1)
      • IntelliJ IDEA (33)
      • WebStorm (0)
      • Pycham (0)
    • 12. API (0)
      • 기초 (0)
      • 네이버 API (0)
      • 카카오 API (0)
      • 구글 API (0)
      • 인스타그램 API (0)
    • 13. AutoHotkey (1)
    • 14. Python (8)
      • 기초 (3)
      • Selenium (2)
      • Beautiful Soup (0)
      • openpyxl (1)
      • Pyqt5 (0)
      • Deep learning (open CV) (0)
      • Geocoder (0)
      • Anaconda (0)
      • DeepLearning (0)
      • Jupyter Nootbook (0)
    • 14.5. R (0)
    • 15. JMeter (0)
      • 다운로드 (0)
    • 16. Vue JS (23)
      • 기초 (3)
      • Vue 2 (15)
      • Vue 3 (5)
      • Vuetify 2.5.8 (0)
    • 17. Git (12)
      • 기초 (8)
      • ItelliJ IDEA (4)
      • SourceTree (0)
    • 18. AWS (5)
      • 기초 (2)
      • Jira (3)
    • 19. Naver Cloud Platform (0)
    • 20. Google Cloud Platform (0)
      • 기초 (0)
      • stt & tts (0)
    • 21. Kotlin (0)
    • 22. Android (0)
      • 기초 (0)
      • Java (0)
      • Kotlin (0)
      • Flutter FrameWork (0)
    • 23. Clean Code [JAVA] (1)
    • 24. BuildTool (1)
      • Maven (1)
      • Gradle (0)
    • 25. 자료 구조와 알고리즘 (18)
      • JAVA (1)
      • Java Script (1)
      • 프로그래머스 (0)
      • 백준 알고리즘 (0)
      • 나의 알고리즘 (14)
      • Brilliant 공부 (0)
    • 26. React (1)
      • 기초 (0)
      • 강의 정리 (1)
    • 27. PostMan (0)
      • 기초 (0)
    • 28. 프로그래머스 (9)
    • 29. Leet Code (0)
    • 30. MySQL (3)
      • 기초 (2)
      • 문제 (1)
    • 73. GraphQL (0)
    • 74. Nuxt JS (0)
    • 75. Electron (0)
    • 76. UX &amp; UI Design Tool (0)
      • 기초 (0)
      • Axure (0)
      • Sketch (0)
      • Figma (0)
    • 77. MarkDown (1)
      • 기초 (1)
    • 78. Tomcat (1)
      • 메모 (1)
    • 79. Element JS (0)
    • 80. Parallax JS (0)
      • 기초 (0)
    • 81. Player JS (0)
      • 기초 (0)
    • 82. Smart Maker (0)
    • 83. Vim (0)
      • 기초 (0)
    • 84. Linux (0)
      • 기초 (0)
      • Centos 7 (0)
      • Ubuntu (0)
    • 85. Node JS (2)
      • 기초 (1)
      • WebRTC (0)
      • NVM (1)
    • 86. Propeller JS (0)
    • 87. FullPage JS (0)
      • 기초 (0)
    • 88. 아두이노 (0)
    • 89. Tensorflow (0)
    • 90. 웹 패킷 분석 (0)
    • 91. 크롬 개발자도구 (0)
    • 92. 디자인 패턴 (7)
      • 생성(Creational) (3)
      • 구조(Structral) (1)
      • 행위(Behavioral) (2)
      • SOLID 패턴 (0)
    • 95. Linux Shell Script (0)
    • 96. 구글 애널리스틱 (0)
    • 97. ffmpeg (0)
    • 98. ShareX (1)
    • 자료실 (0)
    • 기타 (2)

최근 글

인기 글

댓글

공지사항

아카이브

태그

  • 엑셀 가운데맞춤
  • 졵
  • 엑셀 기타작업
  • 엑셀 분석작업
  • 깁
  • 엑셀 기본작업
  • 엑셀 표시형식
  • 엑셀 글씨

나의 외부 링크

  • 비전공자 개발자
  • 자바 디자인 패턴
  • 자바 디자인 패턴
  • 스프링 블로그
  • 해킹보안 & 웹 관련
  • ERD 생성
  • 전문 기술 블로그
  • Servlet에 대한 개념없이 스프링을 했네요?
  • 스프링 FitlerChainList
  • 알고리즘 파워 블로그

정보

THE HEYDAZE의 나눔코딩

나눔코딩

THE HEYDAZE

블로그 구독하기

  • 구독하기
  • RSS 피드

방문자

  • 전체 방문자
  • 오늘
  • 어제

티스토리

  • 티스토리 홈
  • 이 블로그 관리하기
  • 글쓰기
Powered by Tistory / Kakao. © THE HEYDAZE. Designed by Fraccino.

티스토리툴바