자동 스크롤 기능 vue-수신 가능 사용 방법

자동 스크롤 기능 vue-수신 가능 사용 방법

나는 vue-instigable (https://github.com/SortableJS/Vue.Draggable)을 중첩된 많은 항목 목록(조직적 트리)에 사용하려고 한다.

데이터가 많기 때문에 사용자는 끌면서 스크롤할 수 있어야 한다.

sortable.js의 모든 옵션이 지원된다고 하지만, 어떻게 '자동설정'이 구현되어야 하는지 알 수 없다.https://github.com/SortableJS/Sortable/tree/master/plugins/AutoScroll

나는 노력했다:

    import draggable from "vuedraggable";
    import { Sortable, AutoScroll } from 'sortablejs';

    Sortable.mount(new AutoScroll());

템플릿에서 다음 작업을 수행하십시오.

    <draggable class="dragArea"
           tag="ul"
           :list="nodes"
           :group="{ name: 'g1' }"
           :scroll-sensitivity="250"
>
    <li class="drag rij" v-for="el in nodes" :key="el.id"
        {{ el.code }}
    </li>
</draggable>

다음과 같은 오류를 얻는다.

_sortablejs.AutoScroll is not a constructor

나는 이것이 지금 꽤 오래되었다는 것을 알지만, 나는 같은 문제를 만났다.지적했듯이, 자동 스크롤은 기본적으로 켜져 있다.그러나 그것은 틀에 박힌 것 같지 않다.나로서는 두 가지 부분이 있었다.

1. 내 머리글과 바닥글은 페이지 위를 맴도는 고정 요소였기 때문에 자동 스크롤은 요소의 테두리가 아닌 페이지 테두리에 가까워졌을 때만 작동했다.

이는 이미 수행한 자동 스크롤 감도를 높임으로써 해결할 수 있다.

<draggable [...]
           :scroll-sensitivity="200"
>

2. HTML 5의 기본 드래그 앤 드롭 동작이 자동 스크롤 기능을 방해할 수 있는 것처럼 보인다.

이 일은 매우 간단하다.forceFallback끌 수 있는 속성:

<draggable [...]
           :force-fallback="true"
>

---

물론 템플릿 코드를 많이 정리하는 dragOptions를 바인딩하여 수행할 수도 있다.

<draggable class="dragArea"
           tag="ul"
           v-bind="dragOptions"
>

그리고 계산 또는 데이터 속성 추가dragOptions:

  computed: {
    dragOptions() {
      return {
        group: {
          name: 'g1'
        },
        scrollSensitivity: 200,
        forceFallback: true
      };
    }
  }

---

스크롤이 내가 기대했던 것만큼 아름답지는 않지만, 아마도 내가 열어놓은 탭의 양일 것이다.

기본적으로 자동 스크롤이 켜져 있는 것으로 나타났다.그것은 내가 예상했던 것보다 더 안절부절못하게 반응한다.즉, 화면 가장자리(위 또는 아래)로 상당히 정확하게 끌어서 스크롤해야 하지만, 박스 밖으로 잘 작동한다.

따라서 다음과 같이 간단하다.

import draggable from "vuedraggable";

참조URL: https://stackoverflow.com/questions/58505505/how-to-use-autoscroll-feature-vue-draggable