마우스 드래그 및 이동 subforms_javascript 기술의 JS 구현
- WBOY원래의
- 2016-05-16 16:58:29955검색
1. 하위양식
웹사이트를 디자인할 때 다음과 같은 일부 모달 하위 양식을 디자인해야 합니다.
이 단계는 구현하기 쉽습니다. div CSS만 있으면 됩니다. 코드를 참조하세요.
< div class="head">
< 🎜>코드 복사
코드는 다음과 같습니다.
z -색인: 1100;
}
.modal-window
{
배경색: #FFFFFF;
테두리: 1px 단색 #6B94AD;
상자 그림자: 5px 5px 5px #6B94AD;
글꼴 모음 : 'Microsoft YaHei';
글꼴 크기: 12px;
높이: 120px; 왼쪽: 50%;
margin-left: -160px;
margin-top: -160px;
불투명도: 1;
위치: 고정;
위쪽: 50%;
너비: 320px;
Z-색인: 1110;
}
.modal-window .head
{
높이: 25px;
색상: #fff;
글꼴 무게: 600;
배경 이미지: -moz-linear-gradient (상단, #4A8CC5, #2963A5); /* Firefox */
배경 이미지: -webkit-gradient(선형, 왼쪽 상단, 왼쪽 하단, color-stop(0, #4A8CC5), color-stop(1 , #2963A5)); /* Saf4, Chrome */
필터: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A8CC5', endColorstr='#2963A5', GradientType='0') /* IE */
.modal-window .head center
{
padding-top: 2px;
}
위의 html과 css를 추가하면 위의 모달 폼의 효과를 쉽게 얻을 수 있습니다. 그중 left: 50%, top: 50%, margin-left: -160px, margin-top: -160px는 이 모달 형식의 중심 효과를 구현하기 위한 것입니다.
물론, 모달 폼의 크기는 스타일 클래스 .modal-window에 고정되어 있다고 해서 모달 폼의 크기를 수정할 수 없다는 의미는 아닙니다.
코드는 다음과 같습니다.
코드 복사
코드는 다음과 같습니다.
.list-window
높이:400px;
여백-왼쪽:-300px;
사진과 같습니다
이 단계의 구현은 매우 간단하다는 것을 알 수 있습니다. 몇 가지 핵심 라인의 CSS 속성을 익히면 이 모달 하위 양식을 "완전히 남용"할 수 있으며 다른 모달 하위 양식에 대한 추론을 이끌어낼 수 있습니다.
2. 하위 폼의 머리 부분을 마우스로 클릭하면 하위 폼을 끌어서 이동하는 방법은 무엇입니까? jQ가 도입되면 이 작은 기능을 구현하는 데 몇 개의 스크립트만 필요합니다. 믿기지 않는다면 보시죠
var left, top, $this;
$ (document).delegate('.modal-window .head', 'mousedown', function (e) {
left = e.clientX, top = e.clientY, $this = $(this). css(' 커서', '이동');
this.setCapture ? (
this.setCapture(),
this.onmousemove = function (ev) { mouseMove(ev || event); },
this.onmouseup = mouseUp
) : $(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp);
});
function mouseMove(e) {
var target = $this.parents('.modal-window');
var l = Math.max((e.clientX - left Number(target.css('margin-left').replace (/px $/, '')) || 0), -target.position().left);
var t = Math.max((e.clientY - top Number(target.css('margin- top') .replace(/px$/, '')) || 0), -target.position().top);
l = Math.min(l, $(window).width() - target.width () - target.position().left);
t = Math.min(t, $(window).height() - target.height() - target.position().top);
left = e.clientX;
top = e.clientY;
target.css({ 'margin-left': l, 'margin-top': t });
}
function mouseUp (e) {
var el = $this.css('cursor', 'default').get(0);
el.releaseCapture ?
(
el.releaseCapture( ),
el.onmousemove = el.onmouseup = null
): $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp);
}
이 코드는 매우 짧으며 다양한 브라우저에서 원활하게 실행될 수 있습니다.
실제로 구현 원리는 매우 간단하며 대략 세 단계로 나눌 수 있습니다.
①모달 폼의 헤드 부분에서 마우스를 클릭(mousedown)하면 즉시 mousemove 및 mouseup 이벤트를 문서에 바인딩합니다
② 마우스가 튕기지 않을 때(no mouseup) 폼 내에서 마우스가 이동하면 mouseMove 기능이 활성화되고, 마우스 이동 거리를 계산하여 폼 전체의 위치가 시간에 맞춰 이동됩니다.
③마우스가 위로 튀어오르면(mouseup) mouseUp 이벤트를 호출하여 문서에 바인딩된 mousemove 이벤트와 mouseup 이벤트를 바인딩 해제합니다.
전체 프로세스의 원리는 마우스를 눌렀을 때 마우스 이동 이벤트가 문서에 전달되고 문서의 마우스 이동 이벤트를 통해 전체 양식이 처리되는 것입니다.
추가로, mouseMove에는 약간의 트릭이 있습니다. 즉, 전역 left 및 top 변수는 마우스가 마지막으로 멈췄을 때의 위치를 기록하고, 다음에는 마우스 위치를 left 및 top 변수와 비교합니다. 이동 시간에 따라 마우스가 이동한 정도를 결정합니다. 그에 따라 전체 모달 하위 양식을 이동합니다.
이 코드 조각을 분석한 결과 마우스로 문서의 양식이나 요소를 이동하는 것이 매우 쉽다는 것을 알았습니다
예를 들어 드래그 앤 드롭으로 양식의 크기를 변경하려면 mouseMove 이벤트 핸들러 함수에서 양식의 크기만 조정하면 됩니다. 또 다른 작은 트릭을 배웠나요? 앞으로 나아갈까?
어떤 사람들은 setCapture와 releaseCapture가 각각 무엇을 하는지 묻습니다. 사실 이는 IE와의 호환성을 위한 것입니다. IE에만 이 두 가지 기능이 있습니다. 여기서는 IE를 경멸합니다. setCapture를 사용하면 현재 요소가 모든 마우스 이벤트를 캡처할 수 있습니다. 이를 사용하지 않으면 IE 브라우저와 호환되지 않을 수 있습니다.