JavaScript는 Firefox, ie7 페이지 레이아웃 드래그 앤 드롭 효과 code_javascript 기술을 지원합니다.

javascript drag JavaScript Google IG Drag Demo, 아주 좋은 드래그, F2Blog의 새 테마의 배경 모듈 설정에서 사용할 준비가 되었습니다.


사이의 드래그 효과에 대한 페이지 효과 데모 주소: http ://img.jb51.net/online/tuozhuai/google_drag.htm
향상된 버전 효과 데모 주소: http://img.jb51.net/online/tuozhuai/google_drag2
드래그 앤 드롭의 원리:
드래그 앤 드롭의 기본에 대해서는 이 글을 참고하시면 아주 좋습니다.

사실 원리는 매우 간단합니다. onmousedown, onmousemove, onmouseup의 세 가지 이벤트를 바인딩하는 것입니다.
요소의 좌표를 마우스 클릭시(onmousedown) 마우스 좌표로 설정하고, 위치는 절대좌표로 설정합니다.
마우스가 움직일 때(onmousemove) 요소 좌표를 변경합니다.
마우스가 팝업되면(onmouseup) 바인딩된 이벤트를 취소하고 후속 작업을 수행합니다.
javascript Drag and Drop 아래는 Google의 개인 홈페이지를 모방한 드래그 앤 드롭 효과에 대한 데모입니다(프로토타입 포함 필요). 전체 다운로드 패키지: Google
Drag.rar(19.82KB, 다운로드: 247회)
총 4개의 파일이 있습니다:

google_drag.html
prototype. js
범용 드래그 앤 드롭 기능 drag.js
Google의 맞춤 홈페이지 드래그 앤 드롭을 모방 google_drag.js
google_drag.html

창 마지막 몇 줄에 초기화 드래그 기능이 있습니다. .onload = function(){initDrag();}

이렇게 작성해야 합니다.

window.onload = initDrag()

이는 IE 오류: 아직 구현되지 않음
아래에 보고됩니다. 다른 코드에서는 단 몇 줄의 주석만으로 소스 코드를 직접 볼 수 있습니다. 실제로 저는 JavaScript를 사용하여 15개의 div를 그린 다음 해당
클래스를 drag_div로 설정하고(그런 다음 className을 사용하여 요소를 드래그할 수 있는지 확인합니다) 드래그 가능한 부분의 ID를
요소 끝에 _h를 추가합니다. (자신을 드래그 부분으로 설정할 수도 있습니다.)
drag.js는 보다 일반적인 드래그 기능입니다. 여기에는 start_Drag, when_Drag, end_Drag,
after_Drag라는 네 가지 가장 간단한 함수가 포함되어 있습니다. 이 네 가지 기능은 가장 기본적인 드래그 앤 드롭 기능만 구현합니다. 다른 기능을 구현하려면 나중에 이 기능을 수정하거나 재정의할 수 있습니다.
google_drag.js는 Google의 맞춤 홈페이지의 드래그 앤 드롭 효과를 모방한 기능입니다. 위에서 언급한 네 가지 기능을 다루며 비교적
고급 효과를 얻습니다.
드래그 앤 드롭은 실제로 비교적 간단해야 합니다. 드래그 앤 드롭을 구현한 후에는 Ajax를 사용하여 드래그된 위치를 전송하고 서버 측 값을 변경해야 합니다.
이렇게 하면 요소는 다음에 사용자가 액세스할 때 변경되지 않은 상태로 유지됩니다. 효과 구현은 매우 간단합니다. 가장 중요한 것은 이를 기존 프로젝트에 통합하여 사용자 경험을 향상시키는 방법입니다.
이 데모에는 인터넷에서 가져온 일부 참조 코드가 있습니다.
인터넷에 이에 대한 예가 많이 있지만 이것만큼 효율적이지는 않다고 생각합니다. 모든 요소의 위치를 ​​
절대값으로 설정한 다음 각 요소의 상단과 왼쪽을 직접 수정하여 효과를 표시하는 예가 있는데, 그런 경우에는 예를 들어
효과를 로 수정하고 싶어요 여러 번 드래그 앤 드롭하고 각 요소 사이의 위치를 ​​기록하는 것은 꽤 번거로운 작업입니다. 이 예에서
요소의 위치를 ​​기록하려면 드래그된 요소의 ID와 드래그가 완료된 후 드래그된 요소만 기록한 다음 수정을 위해 서버에 전달하면 됩니다
.

업데이트 2007-01-26 1:22
향상된 버전이 추가되었습니다. 효과는 데모를 참조하세요. 실제로 왼쪽 상단의 큰 블록에는 하나의 요소만 있도록 하는 기능이 추가됩니다.
가 두 개 이상인 경우 요소가 없으면 다음 요소가 아래 첫 번째 열에 압착됩니다. , 아래 첫 번째 열부터 푸시됩니다. 열의 첫 번째 요소를 꺼내서 아래 첫 번째 열에 요소가 없으면 두 번째를 찾아 왼쪽 상단의
에 넣습니다. 세 번째 열.