HTML은 div 요소를 임의로 드래그하도록 설정합니다

작은 쓰레기 같은 놈들 · 게시됨 2022. 4. 26. 오전 10:32:01

요구사항: HTML 웹페이지에는 사용자가 습관에 따라 원하는 위치로 드래그할 수 있는 툴바가 있습니다.

우선, 렌더링은 다음과 같습니다:

HTML 요소는 드래그 가능한 속성을 true로 설정하여 임의로 드래그할 수 있지만, 마우스를 놓으면 원래의 위치로 돌아갑니다.

마우스를 놓은 후 원소를 해당 위치로 이동시키는 드래그 이벤트를 추가하면 가능합니다.

첨부된 소스 코드는 다음과 같습니다:

로그인이 보이네요.

드래그 타겟(소스 요소)에서 이벤트 트리거:

OnDragStart - 사용자가 요소를 드래그하기 시작할 때 트리거됩니다
온드래그 - 원소가 드래그될 때 트리거됩니다
Ondragend - 사용자가 요소를 드래그할 때 트리거됩니다

목표물이 방출될 때 발생하는 이벤트:

ondragenter - 마우스가 드래그한 객체가 컨테이너의 범위에 들어갈 때 이 이벤트를 트리거합니다
ondragover - 드래그된 객체가 다른 객체 컨테이너의 범위 내에서 드래그될 때 이 이벤트가 트리거됩니다
ondragleave - 마우스가 드래그한 객체가 컨테이너 범위를 벗어날 때 발생한 이벤트입니다
ondrop - 드래그 중에 마우스 키를 놓을 때 이 이벤트가 트리거됩니다

참조:

HTML5 드래그 앤 드롭 API 사용
https://www.itsvse.com/thread-10299-1-1.html

날치자리 · 게시됨 2022. 4. 26. 오후 9:24:22

다시 와서 배워

비가 내렸다 · 게시됨 2022. 4. 27. 오후 2:13:06

배워, 배워

[HTML/HTML5] HTML은 div 요소를 임의로 드래그하도록 설정합니다

관련 게시물

본 섹션