vue3 마우스 드래그 고정하기
마우스 드래그, css문제로 인해 움직이는 요소 정지시키기, vue3, vue3 darg, 마우스 드래그
Sep 14, 2023
vue-draggable-resizable 라이브러리를 사용하여 제작하였습니다.타입 스크립트를 지원해야한다. 라이브러리 / 린트에서 걸림
해제하는 방법은 있는데 없음 만들 / 좌표
각종 라이브러리를 검색하고 문제점을 해결하던 도중 발견한 라이브러리로
홈페이지를 살펴보니 아래의 기능을 확인 후 적용을 진행하였습니다.
- 그리드
- 이미지 크기 조절
- 영역 내에 이동 가능
<vue-draggable-resizable :w="width" :h="height" @resizing="onResize" @dragging="onDrag" :parent="true" :resizable="true" > <img>드래그 가능한 요소</img> </vue-draggable-resizable>
:w / :h 를 이용하여 이미지의 크기를 설정할 수 있습니다.@resizing을 이용하여 크기 조절 시에 이벤트를 받아올 수 있었습니다.@dragging 을 이용하여 드래그 중에 이벤트를 받아올 수 있었습니다.:parent 를 사용하면 부모 요소 내에서만 드래그 및 크기에 대한 조절이 허용이 됩니다.:resizable 를 사용하면 크기 조절을 허용하고 못하도록 설정할 수 있습니다.Share article