vue-slicksort vue.js 드래그 앤 드롭 구성 요소

이 글은 주로 드래그 가능한 vue.js 구성 요소인 vue-slicksort를 여러분과 공유합니다. 좌표계를 자동으로 스크롤하고 잠글 수 있습니다. 드래그 시 부드러운 애니메이션 효과를 지원합니다. 수평, 수직 또는 그리드 끌기를 지원할 수 있습니다. 터치를 지원합니다. 이 기사가 모든 사람에게 도움이 되기를 바랍니다.

DEMO

설치

npm을 통해 설치

$ npm install vue-slicksort --save

yarn을 통해 설치

$ yarn add vue-slicksort

플러그인 애플리케이션

컴포넌트 소개

// Using an ES6 transpiler like Babel
import {ContainerMixin, ElementMixin} from 'vue-slicksort';

// Not using an ES6 transpiler
var slicksort = require('vue-slicksort');
var ContainerMixin = slicksort.ContainerMixin;
var ElementMixin = slicksort.ElementMixin;

import Vue from 'vue';
import { ContainerMixin, ElementMixin } from 'vue-slicksort';

const SortableList = {
  mixins: [ContainerMixin],
  template: `
    <ul class="list">
      <slot />
    </ul>
  `,
};

const SortableItem = {
  mixins: [ElementMixin],
  props: ['item'],
  template: `
    <li class="list-item">{{item}}</li>
  `,
};

const ExampleVue = {
  name: 'Example',
  template: `
    <p class="root">
      <SortableList lockAxis="y" v-model="items">
        <SortableItem v-for="(item, index) in items" :index="index" :key="index" :item="item"/>
      </SortableList>
    </p>
  `,
  components: {
    SortableItem,
    SortableList,
  },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8'],
    };
  },
};

const app = new Vue({
  el: '#root',
  render: (h) => h(ExampleVue),
});

참조

vue 파일에 있는 이와 같은 구성 요소

Property	Type	Default	Description
value	Array	-	목록 내용
axis	String	y	목록 요소는 다음과 같을 수 있습니다. 수평으로 끌기, 수직 끌기 또는 그리드 끌기. x, y, xy로 표시됩니다.
lockAxis	String	-	정렬 시 좌표계에서 요소의 이동을 잠그는 데 사용됩니다
helperClass	String	-	도우미의 사용자 정의 스타일 클래스
transitionDuration	Number	300	요소 이동 애니메이션의 지속 시간
pressDelay	Number	0	요소를 일정 시간 동안 눌렀을 때 드래그를 허용해야 하는 경우 이 속성을 설정할 수 있습니다
pressThreshold	Number	5	움직임을 무시할 수 있는 임계값 단위는 픽셀입니다.
distance	Number	0	요소 앞으로 일정 거리만큼 드래그해야 하는 경우 드래그되는 것으로 인식되면 이 속성을 설정할 수 있습니다
useDragHandle	Boolean	false	HandleDirective를 사용하는 경우 true로 설정하세요
useWindowAsScrollContainer	Boolean	false	창 설정 여부 스크롤 가능한 컨테이너로
hideSortableGhost	Boolean	false	창을 스크롤 가능한 컨테이너로 설정할지 여부
useWindowAsScrollContainer	Boolean	true	고스트 요소를 자동으로 숨길지 여부
lockToContainerEdges	Boolean	false	드래그 여부 드래그된 요소가 컨테이너의 가장자리를 잠그는지
lockOffset	String	50%	컨테이너의 가장자리를 잠그는 드래그된 요소의 오프셋
shouldCancelStart	Function	-	이 메소드는
getHelperDimensions	Function	-	선택적 메소드({node, index, collection}) 이전에 호출됩니다. SortableHelper

의 계산된 치수 - 공유 Vue 및 Angle의 우수한 구성 요소를 갖춘 웹사이트입니다.

관련 권장 사항:

JS 드래그 앤 드롭 구성 요소_javascript 기술 사용 방법 알아보기

위 내용은 vue-slicksort vue.js 드래그 앤 드롭 구성 요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!