이 예제는 참조를 위해 JavaScript 팝업 드래그 창의 특정 구현 코드를 공유합니다. 특정 내용은 다음과 같습니다
요구 사항 설명 :
1. 페이지 버튼을 클릭하여 창을 팝업합니다.
2. 반투명 배경 마스크가 있습니다.
3. 팝업 창에는 둥근 모서리가 있고 창은 반투명하지만 내용은 불투명합니다. 그림자와 함께;
4. 창을 끌 수 있습니다.
5. 드래그가 정지 된 후, 페이지를 스크롤 할 때 창 위치가 변경되지 않음;
6. jQuery를 사용할 수 있습니다.
7. 닫기 버튼이 있습니다.
추가 기능 설명 :
버튼을 클릭하면 드래그 할 수있는 플로팅 레이어가 있습니다.
타이틀 막대의 드래그 및 삭제를 지원하는 배경 마스크가 있습니다. 타이틀 바 영역 밖에서 드래그하면 효과가 없습니다. 드래그 기능은 제한되어 있으며 드래그 기능은 가시 영역으로 제한됩니다.
드래그 아이디어 :
마우스의 위치를 얻으십시오. 마우스가 움직이면 마우스의 위치를 가져 와서 x 축 y 축을 가져 와서 창의 x 축 y 축에 할당하고 창을 절대적으로 배치하십시오. 마우스가 공개되면이 이벤트를 취소하십시오.
드래그 앤 드롭의 구현 원리 :
마우스가 움직일 때, 마우스가 움직일 때 플로팅 층의 좌표 위치가 지속적으로 업데이트됩니다.
1. 마우스가 부유 요소를 누르면 플로팅 요소를 드래그 할 수 있으므로 마킹하십시오.
2. 마우스가 움직일 때 먼저 부동 요소 마크의 변동이 드래그 될 수 있는지 확인합니다. 그렇다면 플로팅 층이 마우스와 함께 움직이게하고 그렇지 않은 경우 무시하십시오.
3. 마우스가 방출되면 부동 요소를 드래그 할 수 없습니다.
4.JS 드래그 앤 드롭은 주로 Mousedown, MouseMove 및 Mouseup의 세 가지 마우스 이벤트를 사용합니다.
Mousedown : 마우스를 누릅니다
마우스 업 : 마우스를 해제하십시오
MouseMove : 마우스 이동
참고 : Mousedown과 Click의 차이점 : Mousedown 클릭의 전체 프로세스는 세 가지 이벤트에서 발생합니다. Mousedown → Mouseup → Click, Mouse가 끝날 때 마우스가 해제 된 후 클릭이 발생하지 않습니다.
이것에 대해 말하면, 우리는 마우스 이벤트에 대해 이야기해야합니다.
아래 마우스 이벤트에 대해 간단히 이야기 해 봅시다.
(1) 이벤트를 클릭하십시오
(2) DBClick 이벤트
(3) Mousedown 이벤트
(4) 마우스 업 이벤트
(5) 마우스 센터 이벤트
(6) 마우스 오버 이벤트
(7) Mouseleaver 이벤트
(8) 마우스 아웃 이벤트
설명 : (마우스 이벤트의 설명은 W3School에서 선택되었습니다)
(1) 클릭 이벤트 : 사용자가 왼쪽 마우스 버튼을 요소의 탭하고 동일한 요소에서 왼쪽 버튼을 출시 할 때 클릭 이벤트가 트리거됩니다.
(2) DBClick 이벤트 : 요소를 두 번 클릭하면 DBLClick 이벤트가 발생합니다. 마우스 포인터가 요소 위에 머무른 다음 왼쪽 마우스 버튼을 누르고 출시 할 때 클릭이 발생합니다. 매우 짧은 시간에 2 번의 클릭이 발생하며, 이는 더블 클릭 이벤트입니다.
예:
버튼을 두 번 클릭하면 요소를 숨기거나 표시합니다.
$ (document) .ready (function () {$ ( "button"). dblClick (function () {$ ( "p"). slidetoggle ();});(3) Mousedown 이벤트 : 마우스 포인터가 요소 위로 움직이고 마우스 버튼을 누르면 Mousedown 이벤트가 발생합니다. 클릭 이벤트와 달리, Mousedown 이벤트는 키를 누르기 만하면됩니다.
$ (document) .ready (function () {$ ( "button"). MousEdown (function () {$ ( "p"). slidetoggle ();});(4) 마우스 업 이벤트 : 마우스 버튼이 요소에서 완화되면 마우스 업 이벤트가 발생합니다.
클릭 이벤트와 달리 마우스 업 이벤트에는 완화 버튼 만 있으면됩니다. 마우스 포인터가 요소 위에 있으면 완화 마우스 버튼이 이벤트를 트리거합니다.
$ (document) .ready (function () {$ ( "button"). mouseup (function () {$ ( "p"). slidetoggle ();});(5) 마우스 센터 이벤트 : 마우스 포인터가 요소를 통과하면 마우스 센터 이벤트가 발생합니다. 이 행사는 대부분의 시간 동안 Mouseleave 이벤트와 함께 사용됩니다.
참고 : 마우스 오버 이벤트와 달리 마우스 포인터가 선택한 요소를 통과 할 때만 마우스 센터 이벤트가 트리거됩니다. 마우스 포인터가 하위 요소를 통과하면 마우스 오버 이벤트도 트리거됩니다.
(6) 마우스 오버 이벤트 : 마우스 포인터가 요소 위에있을 때 마우스 오버 이벤트가 발생합니다. 이 이벤트는 대부분 마우스 아웃 이벤트와 함께 사용됩니다.
참고 : 마우스 센터 이벤트와 달리 마우스 포인터가 선택한 요소 또는 하위 요소를 통과하는지 여부에 관계없이 마우스 오버 이벤트가 트리거됩니다. 마우스 포인터가 선택된 요소를 통과 할 때만 마우스 센터 이벤트가 트리거됩니다.
$ (document) .ready (function () {$ ( "p"). 마우스 오버 (function () {$ ( "p"). css ( "배경색", "노란색");}); $ ( "p"). mouseout (function () {$ ( "p"). css ( "background-color", "#e9e9e4");마우스 센터와 마우스 오버의 차이
<html> <head> <script type = "text/javaScript"src = "/jquery/jquery.js"> </script> <script type = "text/javaScript"> x = 0; y = 0; $ (document) .ready (function () {$ ( "div.over"). 마우스 오버 (function () {$ ( ". 오버 스팬"). 텍스트 (x+= 1);}); $ ( "Div.Enter"). mouseEnter (function () {$ ( ". y+= 1);}); </script> </head> <body> <p> 마우스 포인터가 선택한 요소 또는 하위 요소를 통과하는지 여부에 관계없이 마우스 오버 이벤트가 트리거됩니다. </p> <p> 마우스 포인터가 선택한 요소를 통과 할 때만 마우스 센터 이벤트가 트리거됩니다. </p> <div style = "back 스타일 = "배경 색 : 흰색;"> 플래시 된 마우스 센터 이벤트 : <pan> </span> </h2> </div> </body> </html>(7) Mouseleaver 이벤트 : 마우스 포인터가 요소를 통과하면 마우스 센터 이벤트가 발생합니다.
이 행사는 대부분의 시간 동안 Mouseleave 이벤트와 함께 사용됩니다.
참고 : 마우스 아웃 이벤트와 달리 마우스 포인터가 선택된 요소를 떠날 때만 마우스 엘리브 이벤트가 트리거됩니다. 마우스 포인터가 자식 요소에 남겨두면 마우스 아웃 이벤트도 트리거됩니다.
(8) 마우스 아웃 이벤트
마우스 아웃 이벤트는 마우스 포인터가 요소에서 멀어 질 때 발생합니다.
이 이벤트는 대부분 마우스 오버 이벤트와 함께 사용됩니다.
참고 : Mouseleave 이벤트와 달리 마우스 포인터가 선택된 요소 또는 하위 요소를 떠나는 지 여부에 관계없이 마우스 아웃 이벤트가 트리거됩니다. 마우스 포인터가 선택된 요소를 떠날 때만 Mouseleave 이벤트가 트리거됩니다.
다음 예제 데모를 참조하십시오.
<html> <head> <script type = "text/javaScript"src = "/jquery/jquery.js"> </script> <script type = "text/javaScript"> x = 0; y = 0; $ (document) .ready (function () {$ ( "div.out"). 마우스 아웃 (function () {$ ( ". out span"). text (x+= 1);}); $ ( "div.leave"). mouseleave (function () {$ ( ". y+= 1);}); </script> </head> <body> <p> 마우스 포인터가 선택된 요소 또는 하위 요소를 떠나지 않는지 여부에 관계없이 마우스 아웃 이벤트가 트리거됩니다. </p> <p> 마우스 포인터가 선택된 요소를 떠날 때만 Mouseleave 이벤트가 트리거됩니다. </p> <div style = "back 스타일 = "배경 색 : 흰색;"> 플래시 된 Mouseleave 이벤트 : <pan> </span> </h2> </div> </body> </html>참고 :이 기사는 원래의 주소입니다. http://www.cnblogs.com/wanghuih/p/5569438.html입니다
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.