JQuery 드래그 앤 드롭 플러그인 구현 code_jquery

많은 페이지 효과에서는 이러한 위치를 사용합니다. 최후의 수단으로 연습하고 기억해야 합니다.
JQuery 기반의 간단한 드래그 앤 드롭 플러그인에 대해 이야기해 보겠습니다.
늘 그렇듯이 먼저 드래그 앤 드롭의 원리와 이를 만드는 단계에 대해 이야기해 보겠습니다.
그럼 드래그 앤 드롭이 무엇인가요? 이름만 봐도 알 수 있습니다. 무언가를 끌고 다닙니다. DOM에 넣는 것은 위치를 바꾸는 것을 의미합니다.
단 두 가지 어려움이 있습니다. 1. 드래그되는지 어떻게 알 수 있나요? 2. 드래그할 위치와 드래그할 위치를 어떻게 알 수 있나요?
사실 이건 어렵지 않아요. 결국 둘 다 기본이거든요.
js로 전환하여 드래그 효과를 생성합니다. 단계는 다음과 같습니다.
1. 요소가 이벤트를 캡처하도록 합니다(일반적으로 mousedown, mousemove, mouseup에 지나지 않습니다)
2 . mousedown 동안 드래그 시작을 표시하고 요소와 마우스의 위치를 ​​얻습니다.
3. 마우스 이동 중에 마우스의 새로운 위치를 지속적으로 획득하고 해당 위치 알고리즘을 통해 요소의 위치를 ​​변경합니다.
4. 마우스업 중에 드래그를 종료합니다. . . 그런 다음 사이클이 다시 시작됩니다.
중간에 주의가 필요한 사항이 하나 있습니다. 드래그한 요소는 최소한 상대적으로 또는 절대적인 위치에 있어야 합니다. 그렇지 않으면 드래그가 아무런 효과가 없습니다.
좋아, 더 이상 단어도, 암호도, 진실도 없습니다. 해당 설명이 들어있습니다.
다운로드:

코드 복사 코드는 다음과 같습니다.

<머리>

< ;/html>