첫 투고입니다. 잘 부탁드립니다.

1. 환경

Vue.js: 2.6.11
Vue.Draggable: 2.23.2
Google 크롬

2. 문제

취미로 어쨌든 Vue.js로 웹 앱을 만들고 있습니다.

드래그&드롭으로 요소를 삐코삐코 이동시키는 기능을 만들고 싶다 ~라고 생각하면, Vue.Draggable 라는 정말 편리한 것이 존재하고 있지 않습니까.

즉시 설치하고 구현.

꽤 좋은 느낌이 되어 왔다, 라고 생각하면 문득 묘한 움직임을 하고 있는 것을 깨달았습니다.

우선 동영상을 시청하세요.

※Google Chrome의 경우



아래 영역의 요소를 조금 움직였을 뿐인데, 왼쪽 상단의 영역이 어쨌든 번쩍입니다.
잘 보면 아래 영역의 요소를 움직이기 시작한 순간 그 요소가 왼쪽 위 영역에 워프하고 있습니다.

뭐야 이건 공식 사이트를 보았는데 공식 사이트 데모 앱에서도 같은 움직임을 합니다.
아~그럼 안 되겠다, 라고 생각하면서 포기할 수 없어 영어의 사이트나 중국어의 사이트를 가졌습니다만 해결하지 않고…

3. 대증 치료

멍하니 하면서 기묘한 움직임을 하는 드래그&드롭의 조작을 반복하고 있으면, 문득 대증 요법이 떠올랐습니다.

여러가지 시도해 눈치채는 것은, 이 현상은 clone 이벤트의 직후에 발생하고 있다는 것입니다.
그래서 clone 이벤트의 이벤트 핸들러에 다음 설명을 추가했습니다.

<draggable tag="ul" v-model="left" :group=state @clone="onClone">
    <li v-for="l in left" :key="l.content">
        <div>{{ l.content }}</div>
    </li>
</draggable>
<!-- あと右上エリアの分と下エリアの分-->

data() {
    return {
        state: undefined,
        left: [
            {content: "task1"},
            {content: "task2"},
            {content: "task3"},
            {content: "task4"}
        ],
        //あと右上エリアの分と下エリアの分
    }
},
methods: {
    onClone: function () {
        this.state = null
        setTimeout(this.setGroup, 100)
    },
    setGroup: function () {
        this.state = "move"
    }
}

clone 이벤트가 발생하면 group 속성을 null 로 하여 group 간의 이동을 방지합니다.
0.1초 정도 기다려, group 속성에 값을 세트해 group간의 이동을 가능하게 합니다.

그러면 다음 동영상처럼 보입니다.



이상한 움직임은 사라졌습니다.

또한 동일한 영역 내에서 요소의 이동과 관련하여 움직이는 요소의 두 줄 위의 요소가 순간적으로 움직이는 이상한 움직임을 할 수 있습니다.

그것도 이 대증요법으로 대응할 수 있는 것 같습니다.