정렬 을 드래그 할 수 있 는 vue 구성 요 소 를 공유 합 니 다.

최근 에 드래그 와 관련 된 기능 을 하려 고 했 는데 자기가 쓰 려 고 했 는데 갑자기 생각 나 기 전에 바퀴 공장 에서 업 데 이 트 를 한 적 이 있 는데 vue - dragging 은 그래도 잘 쓰 는 것 같 아 요.
소개 하 다.
vue - dragging - 정렬 을 임의로 드래그 할 수 있 는 vue 플러그 인 입 니 다.데스크 톱 과 이동 단 을 지원 합 니 다. 과도 애니메이션 의 아름다움 을 끌 어 당 깁 니 다.vue 1 과 vue 2 버 전 을 지원 합 니 다.매우 실용적이다.
설치 하 다.
NPM 으로 설치

$ npm install awe-dnd --save

플러그 인 응용
main. js 에서 Vue. use 를 통 해 플러그 인 가 져 오기

import VueDND from 'awe-dnd'

Vue.use(VueDND)

vue 파일 에서 이렇게 참조 합 니 다.

export default {
  data () {
    return {
        colors: [{
            text: "Aquamarine"
        }, {
            text: "Hotpink"
        }, {
            text: "Gold"
        }, {
            text: "Crimson"
        }, {
            text: "Blueviolet"
        }, {
            text: "Lightblue"
        }, {
            text: "Cornflowerblue"
        }, {
            text: "Skyblue"
        }, {
            text: "Burlywood"
        }]
    }
  }
}

vue 2.0 사용 방식

    
{{color.text}}

vue 1.0 사용 방식

    
{{color.text}}

이벤트 추가

    
{{color.text}}

export default {
  mounted () {
    this.$dragging.$on('dragged', ({ value }) => {
      console.log(value.item)
      console.log(value.list)
      console.log(value.otherData)
    })
    this.$dragging.$on('dragend', () => {
        
    })
  }
}

바퀴 공장 -- vue, angular 우수 구성 요 소 를 공유 하 는 사이트