jQuery 드래그 div, 이동 div, 팝업 레이어 구현 원리 및 예제_jquery

코드 데모:

http://www.imqing.com/demo/movediv.html

일반 원칙:

div의 위치를 ​​절대값으로 만든 후 제어 상단 및 왼쪽 값은 주로 mousedown, mousemove 및 mouseup과 같은 마우스 이벤트를 모니터링해야 합니다.

mousedown 후 마우스의 위치와 mousedown 중에 이동해야 하는 div를 기록하고, 그 차이를 구하여 마우스가 이동한 후 div의 위치를 ​​구합니다. 즉,

left = 현재 마우스 위치.x - (마우스를 클릭했을 때의 .x 값 - div의 초기 위치 x 값)
top = 현재 마우스 위치.y - (. y 마우스 클릭시 값 - div의 초기 위치 y 값)

코드:

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

Equiv="Content-Type" content="text /html;charset=UTF-8">