오늘 우리는 드래그 객체가 특정 DIV에서 끌리는 것을 방지하고 흡착 기능을 드래그하는 방법을 살펴볼 것입니다.
지난번에, 우리는 드래그 앤 드롭에 대해 이야기했고, 시각적 영역에서 끌 수는 없습니다. 이를 바탕으로 부모 DIV를 추가하여 부모로부터 끌리는 것을 방지합니다. 원리는 이전과 동일하며 간단합니다.
HTML 코드 :
<div id = "div2"> <div id = "div1"> </div> </div>
CSS 코드 :
<스타일 유형 = "text/css"> #div1 {너비 : 100px; 높이 : 100px; 배경 : 빨간색; 위치 : 절대; } #div2 {너비 : 400px; 높이 : 300px; 배경 : #CCCCCC; 위치 : 상대; } </style>자바 스크립트 코드 :
<script type = "text/javaScript"> // 비어있는 div를 끌고 떨어 뜨립니다. Firefox의 낮은 버전은 bug window.onload = function () {var odiv = document.getElementById ( "div1")가 있습니다. var odiv2 = document.getElementById ( "div2"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || 이벤트; Disx = Oevent.clientx -Odiv.offsetleft; disy = oevent.clienty -odiv.offsettop; document.onmouseMove = function (ev) {var oevent = ev || 이벤트; // div var odivleft = oevent.clientx -disx의 현재 위치를 저장합니다. var odivtop = oevent.clienty- disy; if (odivleft <0) {odivleft = 0; } else if (odivleft> odiv2.offsetWidth- odiv.offsetWidth) {odivleft = odiv2.offsetWidth- odiv.offsetWidth; } if (odivtop <0) {odivtop = 0; } else if (odivtop> odiv2.offsetheight- odiv.offsetheight) {odivtop = odiv2.offsetheight- odiv.offsetheight; } odiv.style.left = odivleft + 'px'; odiv.style.top = odivtop + 'px'; }; document.onmouseup = function () {document.onmouseMove = null; document.onmouseup = null; }; 거짓을 반환합니다. // 기본 이벤트를 차단하고 Firefox 버그를 해결합니다}; }; </스크립트>렌더링은 다음과 같습니다.
간단합니다.
다음은 자동으로 흡수하는 방법입니다.
사실, 이것은 종종 사람들이 사용합니다. 예를 들어, PS에 작은 창이 페이지의 가장자리로 드래그하는 작은 창이 있으면 자동으로 첨부됩니다.
드래그 앤 드롭은 어떻게 그러한 기능을 가질 수 있습니까?
이것은 실제로 운동 중에 실제로 언급되었습니다. 그것은 택시를 타는 것과 같으며 운전자가 정확히 공원을 두지 못하게 할 수 없습니다. 그는 목적지 근처에 주차해야합니다.
프로그램도 마찬가지입니다. 거의 시간이 걸리면 직접 할당 할 수 있습니다. 드래그 한 객체가 왼쪽에서 50px 떨어져 있다고 가정하고 왼쪽에 있다고 생각하며 0에 직접 할당되면 자동으로 흡착됩니다.
원칙은 매우 간단합니다. 코드가 어떻게 구현되는지 살펴 보겠습니다. 약간 수정하십시오
<script type = "text/javaScript"> wind var odiv2 = document.getElementById ( "div2"); var disx = 0; var disy = 0; odiv.onmousedown = function (ev) {var oevent = ev || 이벤트; Disx = Oevent.clientx -Odiv.offsetleft; disy = oevent.clienty -odiv.offsettop; document.onmouseMove = function (ev) {var oevent = ev || 이벤트; VAR ODIVLEFT = OEVENT.CLIENTX- DISX; var odivtop = oevent.clienty- disy; // 왼쪽이 50 미만인 경우 자동으로 0이됩니다. (Odivleft <50) {Odivleft = 0; } else if (odivleft> odiv2.offsetWidth- odiv.offsetWidth) {odivleft = odiv2.offsetWidth- odiv.offsetWidth; } if (odivtop <0) {odivtop = 0; } else if (odivtop> odiv2.offsetheight- odiv.offsetheight) {odivtop = odiv2.offsetheight- odiv.offsetheight; } odiv.style.left = odivleft + 'px'; odiv.style.top = odivtop + 'px'; }; document.onmouseup = function () {document.onmouseMove = null; document.onmouseup = null; }; 거짓을 반환합니다. }; }; </스크립트>다음에 우리는 고급 응용 프로그램에 대해 이야기 할 것입니다.이 응용 프로그램은 더 책임감 있고 유용합니다. 드래그 앤 드롭 기능이 향상되었습니다.
예를 들어, 그림을 드래그하고 텍스트를 선택합니다. 예를 들어, 현재 사용중인 드래그 페이지에는 하나의 DIV 만 있으며, 이는 정상 개발에서 발생하지 않을 것입니다.
사실, 페이지에 무언가가있을 때이 드래그에서 어떤 문제가 발생합니까? ? ?
다음 번에 해결 될 것입니다 ~ 제발 기다리세요