Vue3을 사용하여 우아한 요소 드래그 기능을 구현하는 방법을 단계별로 가르쳐주세요.
Mar 30, 2023 pm 08:57 PM요소 드래그 기능을 구현하는 방법은 무엇입니까? 다음 글은 Vue3를 사용하여 우아한 요소 드래그 기능을 구현하는 방법을 단계별로 이해하고 예제를 통해 관련 지식 포인트를 배우는 것이 도움이 되기를 바랍니다.
몇 가지 유용한 도구 추천
- var-conv VSCode IDE에 적합한 코드 변수 이름을 위한 빠른 변환 도구
- generator-vite-plugin Vite 플러그인 템플릿 프로젝트를 빠르게 생성
- generator-babel-plugin Babel 플러그인 템플릿 프로젝트를 빠르게 생성
요점 확인
요소 드래그는 JavaScript 이벤트에 대한 어느 정도 이해가 필요한 일반적인 프런트 엔드 학습 사례입니다. 최근 Zhongcai는 이 콘텐츠를 다시 선택하여 Vue3와 같은 선언적 프로그래밍 스타일 프레임워크에서 요소를 한 번 드래그하여 명확하게 설명했습니다. [관련 권장 사항: vuejs 비디오 튜토리얼, 웹 프론트 엔드 개발]
PS: Vue3 템플릿 전역 스타일의 centering 속성은 실험적 간섭을 일으킬 수 있으니 주의하세요! ! !
요소의 위치 및 이동
요소 드래그를 구현할 때 mouse
이벤트의 콜백 함수에서 다음을 얻을 수 있습니다. 현재 이벤트가 발생할 때 요소의 위치입니다. 해당 속성은 MouseEvent
의 clientX
및 clientY
입니다. 나중에 이 두 속성을 읽어 실시간으로 요소를 확인하세요. mouse
事件,在 mouse
事件的回调函数中可以得到当前事件发生时元素的位置,对应的属性是 MouseEvent
中的 clientX
和 clientY
,我们后续将通过读取这两个属性来实时更新元素的位置。
元素的移动推荐优先使用 transform
中的 translate
实现,相比于修改元素的 top
、left
属性来说不会造成元素布局的改变,避免了回流和重绘造成的性能影响。
PS:在 MDN 有一份关于translate的使用和体验,可以感受一下。
定义三组坐标
分别定义用来记录元素初始位置的一组坐标(originalPosition
)、元素被按下时指针在元素上的坐标(mousedownOffset
)和元素在移动时实时更新的一组坐标(elementPosition
)。
记录元素初始位置的坐标,原点位于页面左上角,用来在初始化和被拖拽结束后还原被拖拽元素的位置,固定值不发生变化:
const originalPosition = reactive({ x: 10, y: 10, })
元素被按下时指针在元素上的坐标,原点位于被拖拽元素的左上角,通过按下时指针的坐标 - 元素初始的偏移位置得到:
const mousedownOffset = reactive({ x: 0, y: 0, })
元素在移动时实时更新的坐标,原点位于页面左上角,初始值应该同 originalPosition
,在 mousemove
事件发生时,通过指针的实时坐标 - mousedownOffset
得到:
const elementPosition = reactive({ x: 0, y: 0, })
PS:当原点是页面左上角时在图中的1号点表示 originalPosition
或 elementPosition
,2号点表示指针按下时的坐标,当原点是1号点时在图中的2号点表示 mousedownOffset
;
注册 mousedown 事件
在实现元素拖拽时,仅需要给被拖拽的元素添加 mousedown
事件即可,监听事件使用完后记得要清楚掉,成对出现的习惯一定要养成。
如果你把 mousemove
和 mouseup
都添加到被拖拽的元素上,你会发现有脱离控制的现象发生。
在页面加载完成后首先要重置一下被拖拽元素的默认位置,并增加 mousedown
事件,在组件卸载后删除 mousedown
상단
및 왼쪽
을 수정하는 대신 요소를 먼저 이동하려면 transform
의 translate
구현을 사용하는 것이 좋습니다. code> 요소 > 속성은 요소 레이아웃을 변경하지 않으므로 리플로우 및 다시 그리기로 인한 성능 영향을 방지합니다. 🎜🎜PS: MDN🎜에는 번역의 사용과 경험에 대한 기사가 있으니 느껴보실 수 있습니다. 🎜🎜 세 개의 좌표 세트를 정의합니다. 🎜🎜🎜 각각 요소의 초기 위치(originalPosition
), 포인터를 기록하는 데 사용되는 좌표 세트를 정의합니다. 요소를 눌렀을 때 요소의 좌표(mousedownOffset
)와 요소가 움직일 때 실시간으로 업데이트되는 좌표 집합(elementPosition
). 🎜🎜요소의 초기 위치 좌표를 기록합니다. 원점은 페이지의 왼쪽 상단에 있습니다. 초기화 및 드래그 후 드래그된 요소의 위치를 복원하는 데 사용됩니다. 🎜 const restore = () => {
elementPosition.x = originalPosition.x;
elementPosition.y = originalPosition.y;
}
onMounted(() => {
restore();
floatButton.value.addEventListener('mousedown', onMousedown, true);
})
onUnmounted(() => {
floatButton.value.removeEventListener('mousedown', onMousedown, true);
})
로그인 후 복사로그인 후 복사🎜요소를 누르면 포인터가 요소 위에 있습니다. 의 좌표는 원점은 드래그된 요소의 왼쪽 상단에 위치하며, 눌렀을 때 포인터의 좌표로 구합니다. - 요소의 초기 오프셋 위치 요소: 🎜const onMousedown = (event: MouseEvent) => {
event.stopPropagation();
mousedownOffset.x = event.clientX - originalPosition.x;
mousedownOffset.y = event.clientY - originalPosition.y;
document.addEventListener('mousemove', onMousemove, true);
document.addEventListener('mouseup', onMouseup, true);
}
로그인 후 복사로그인 후 복사🎜요소가 이동할 때 실시간으로 업데이트되는 좌표, 원점은 페이지의 왼쪽 상단에 위치하며, 초기값은 originalPosition
과 동일해야 합니다. code>mousemove 이벤트가 발생하면 포인터의 실시간 좌표 - mousedownOffset
가 획득됩니다: 🎜const onMousemove = (event: MouseEvent) => {
event.stopPropagation();
elementPosition.x = event.clientX - mousedownOffset.x;
elementPosition.y = event.clientY - mousedownOffset.y;
}
로그인 후 복사로그인 후 복사🎜
🎜🎜PS: 원점이 페이지의 왼쪽 상단일 때 그림에서 Point 1은 를 나타냅니다. OriginalPosition
또는 elementPosition
, 포인트 2는 포인터를 눌렀을 때의 좌표를 나타냅니다. 원점이 포인트 1일 때 그림의 포인트 2는 mousedownOffset
;🎜<을 나타냅니다. h3 data-id="heading-6">🎜mousedown 이벤트 등록🎜🎜🎜요소 드래그를 구현할 때 드래그된 요소에 mousedown</code만 추가하면 됩니다. > 이벤트는 모니터링 이벤트를 삭제하는 것으로 충분합니다. 사용한 후에는 쌍으로 나타나는 습관을 길러야 합니다. 🎜🎜드래그된 요소에 <code>mousemove
, mouseup
를 추가하면 제어불능이 발생하는 것을 확인할 수 있습니다. 🎜🎜페이지가 로드된 후 먼저 드래그된 요소의 기본 위치를 재설정하고 mousedown
이벤트를 추가하세요. 구성 요소가 언로드된 후 mousedown
이벤트를 삭제하세요. 🎜const restore = () => {
elementPosition.x = originalPosition.x;
elementPosition.y = originalPosition.y;
}
onMounted(() => {
restore();
floatButton.value.addEventListener('mousedown', onMousedown, true);
})
onUnmounted(() => {
floatButton.value.removeEventListener('mousedown', onMousedown, true);
})
로그인 후 복사로그인 후 복사实现拖拽的核心
const restore = () => { elementPosition.x = originalPosition.x; elementPosition.y = originalPosition.y; } onMounted(() => { restore(); floatButton.value.addEventListener('mousedown', onMousedown, true); }) onUnmounted(() => { floatButton.value.removeEventListener('mousedown', onMousedown, true); })
const onMousedown = (event: MouseEvent) => { event.stopPropagation(); mousedownOffset.x = event.clientX - originalPosition.x; mousedownOffset.y = event.clientY - originalPosition.y; document.addEventListener('mousemove', onMousemove, true); document.addEventListener('mouseup', onMouseup, true); }
const onMousemove = (event: MouseEvent) => { event.stopPropagation(); elementPosition.x = event.clientX - mousedownOffset.x; elementPosition.y = event.clientY - mousedownOffset.y; }
const restore = () => { elementPosition.x = originalPosition.x; elementPosition.y = originalPosition.y; } onMounted(() => { restore(); floatButton.value.addEventListener('mousedown', onMousedown, true); }) onUnmounted(() => { floatButton.value.removeEventListener('mousedown', onMousedown, true); })
选择 Vuejs
的原因就是因为其是 MVVM
型框架,我们关注点在声明上,内部的运转机制有框架负责,所以在下面的事件处理上就只需要在对应的事件中去更新一开始声明的三组坐标就可以了。
在 onMousedown
时,通过指针所在的坐标 - 被拖拽元素初始位置的坐标得到指针此时在被拖拽元素上的坐标,onMousedown
时要为 document
添加 mousemove
和 mouseup
事件:
const onMousedown = (event: MouseEvent) => { event.stopPropagation(); mousedownOffset.x = event.clientX - originalPosition.x; mousedownOffset.y = event.clientY - originalPosition.y; document.addEventListener('mousemove', onMousemove, true); document.addEventListener('mouseup', onMouseup, true); }
在 onMousemove
时,通过指针所在的坐标 - 指针在被拖拽元素上的位置得到被拖拽元素左上角距离页面左上角的距离,并更新到 elementPosition
:
const onMousemove = (event: MouseEvent) => { event.stopPropagation(); elementPosition.x = event.clientX - mousedownOffset.x; elementPosition.y = event.clientY - mousedownOffset.y; }
在 onMouseup
时,主要做的就是为 document
移除在 onMousemove
时注册的两个事件,要注意的是移除的事件要是同一个事件,也就是引用一致的事件,推荐将对应的处理事件赋值给一个变量使用,最后可以在拖拽结束后还原被拖拽元素的位置:
const onMouseup = (event: MouseEvent) => { event.stopPropagation(); document.removeEventListener('mousemove', onMousemove, true); document.removeEventListener('mouseup', onMouseup, true); restore(); }
补充其它部分代码和演示
<div ref="floatButton" class="float-button" :style="{ 'transition-duration': '0.1s', transform: `translate(${elementPosition.x}px, ${elementPosition.y}px)` }"> </div>
.float-button { position: absolute; width: 42px; height: 42px; background: red; border-radius: 5px; user-select: none; background-image: url(../assets/taobao.svg); background-size: cover; }
总结
使用 mousemove、translate 在 Vue3 中实现可以随意拖拽的 Icon 的案例就完成了,在本次案例中需要认真思考对应的几个坐标和移动时坐标如何更新,事件的使用要成对出现,如何在这个拖拽的 Icon 上增加点击事件时还需要多做一些处理,有答案的朋友可以留下你的想法~
위 내용은 Vue3을 사용하여 우아한 요소 드래그 기능을 구현하는 방법을 단계별로 가르쳐주세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

인기 기사

인기 기사

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











Vue 프로젝트에 Ace 코드 편집기를 통합하는 방법에 대한 자세한 그래픽 설명

도메인 간 문제를 해결하는 방법은 무엇입니까? 일반적인 솔루션에 대한 간략한 분석
