마우스로 드래그하여 DIV를 변경하는 예에 대한 자세한 설명
1. 첫 번째 구현
1.1 html code
<html xmlns="www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>div change width by drag</title><script src="../jQuery/jquery-1.8.3.min.js?1.1.11" type="text/javascript"></script></head><body><h1>div change width by drag</h1><div id="pos" style="color:red"></div><div id="myDiv" style="border:2px solid red;width:300px;height:50px;margin-left: 100px;margin-top: 20px"></div></body></html>
1.2 js code
var eleLeft = $('#myDiv').offset().left;var isMouseDown = false;var borderLen = 4; //左右边框
$('#myDiv').bind({
mousedown:function(e){var ele = $(this);var rightPos = eleLeft + ele.width() + borderLen;if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
isMouseDown = true;
}
},
mousemove:function(e){var ele = $(this);var rightPos = eleLeft + ele.width() + borderLen;
$('#pos').text("x:"+e.pageX + " eleLeft:"+eleLeft+" rightPos:"+rightPos);if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
ele.css('cursor','e-resize');
}else{if(!isMouseDown){
ele.css('cursor','auto');
}
}if(isMouseDown){
ele.width((e.pageX-eleLeft-borderLen)+'px'); //新鼠标位置-div距左-borderLen }
},
mouseup:function(e){
isMouseDown = false;
}
});1.3 Result
div 너비를 작게 하려면 왼쪽으로만 드래그하면 되고, 오른쪽으로 드래그해도 소용이 없습니다! 그 이유는 마우스를 오른쪽으로 드래그하는 mousemove 이벤트를 div에서 캡쳐할 수 없기 때문입니다. 드래그하는 동안 멈추는 것도 어렵습니다! 그래서 개선되어야합니다.
2. 다시 개선됨
$('#myDiv' ele = $( rightPos = eleLeft + ele.width() +(rightPos-5 <= e.pageX && e.pageX <== 'body' ele = $('#myDiv' rightPos = eleLeft + ele.width() +'#pos').text("x:"+e.pageX + " eleLeft:"+eleLeft+" rightPos:"+(rightPos-5 <= e.pageX && e.pageX <='cursor','e-resize'(!'cursor','auto'-eleLeft-borderLen)+'px'); =이번에는 위의 문제가 해결되었으므로 언제든지 오른쪽으로 드래그하여 중지할 수 있습니다. 여기서 끝났나요? NO!
다른 div를 도입하고 mouseup 이벤트가 버블링되는 것을 방지하면 어떻게 되나요? 대답은 이 다른 div로 드래그하고 마우스를 놓으면 멈출 수 없다는 것입니다!
<div id="otherDiv" style="border: 2px solid blue;width: 200px;height: 200px;margin-left: 400px"></div>
$('#otherDiv').mouseup(function(e){//e.preventDefault(); //阻止默认行为e.stopPropagation(); //阻止事件冒泡(导致body捕获不到mouseup事件)});3. 완벽한 솔루션
드래그 스톱이 다른 요소에 의해 방해를 받을 수 있는데 어떻게 해결하나요? 다른 곳을 클릭하면 숨겨질 수 있는 몇몇 팝업 레이어의 기능을 생각하다가, mouseup 이벤트에 항상 응답할 수 있도록 마스크 레이어를 추가하자는 생각도 하게 된 것 아닌가요?
$('#myDiv').bind({
mousedown:function(e){var ele = $(this);var rightPos = eleLeft + ele.width() + borderLen;if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
isMouseDown = true;//创建遮罩层，防止mouseup事件被其它元素阻止冒泡，导致mouseup事件无法被body捕获，导致拖动不能停止var bodyWidth = $('body').width();var bodyHeight = $('body').height();
$('body').append('<div id="mask" style="opacity:0.2;top:0px;left:0px;background-color:green;position:absolute;z-index:9999;width:'+bodyWidth+'px;height:'+bodyHeight+'px;"></div>');
}
}
});
$('body').bind({
mousemove:function(e){var ele = $('#myDiv');var rightPos = eleLeft + ele.width() + borderLen;
$('#pos').text("x:"+e.pageX + " eleLeft:"+eleLeft+" rightPos:"+rightPos);if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
ele.css('cursor','e-resize');
}else{if(!isMouseDown){
ele.css('cursor','auto');
}
}if(isMouseDown){
ele.width((e.pageX-eleLeft-borderLen)+'px');
}
},
mouseup:function(e){
isMouseDown = false;
$('#mask').remove();
}
});
$('#otherDiv').mouseup(function(e){//e.preventDefault(); //阻止默认行为e.stopPropagation(); //阻止事件冒泡(导致body捕获不到mouseup事件)});
4. 완전한 코드 및 최종 효과
div change width by drag div change width by drag
<div id="otherDiv" style="border: 2px solid blue;width: 200px;height: 200px;margin-left: 400px"></div>
위 내용은 마우스로 드래그하여 DIV를 변경하는 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7722
15
1642
14
1396
52
1289
25
1233
29
Edge 브라우저에서 웹페이지를 데스크톱에 바로가기로 보내는 방법은 무엇입니까?
Mar 14, 2024 pm 05:22 PM
Edge 브라우저에서 웹 페이지를 바탕 화면에 바로 가기로 보내는 방법은 무엇입니까? 많은 사용자들이 액세스 페이지를 직접 열 수 있는 편의를 위해 자주 사용하는 웹 페이지를 데스크탑에 바로가기로 표시하고 싶어하지만 어떻게 해야 하는지 알지 못합니다. 이 문제에 대해 이번 호의 편집자는 다음과 같은 내용을 공유합니다. 대다수의 사용자에게 솔루션을 제공하는 방법에 대해 알아보겠습니다. 오늘의 소프트웨어 튜토리얼에서 공유된 내용을 살펴보겠습니다. Edge 브라우저에서 웹 페이지를 데스크탑으로 보내는 바로 가기 방법: 1. 소프트웨어를 열고 페이지에서 "..." 버튼을 클릭합니다. 2. 드롭다운 메뉴 옵션의 "애플리케이션"에서 "이 사이트를 애플리케이션으로 설치"를 선택합니다. 3. 마지막으로 팝업창에서 클릭해주세요.
웹 페이지 자동 새로 고침을 설정하는 방법
Oct 26, 2023 am 10:52 AM
웹 페이지의 자동 새로 고침을 설정하려면 HTML "meta" 태그, JavaScript "setTimeout" 함수, "setInterval" 함수 또는 HTTP "Refresh" 헤더를 사용할 수 있습니다. 자세한 소개: 1. HTML 문서의 "<head>" 태그에서 "meta" 태그를 사용하여 웹 페이지의 자동 새로 고침을 설정할 수 있습니다. 2. "setTimeout" " JavaScript 등의 기능
웹페이지의 이미지를 로드할 수 없으면 어떻게 해야 합니까? 6가지 솔루션
Mar 15, 2024 am 10:30 AM
일부 네티즌들은 브라우저 웹페이지를 열었을 때 웹페이지의 사진이 오랫동안 로드되지 않는다는 사실을 발견했습니다. 네트워크가 정상인지 확인했는데 무엇이 문제인가요? 아래 편집기에서는 웹 페이지 이미지를 로드할 수 없는 문제에 대한 6가지 해결 방법을 소개합니다. 웹페이지 이미지를 로드할 수 없습니다: 1. 인터넷 속도 문제 웹페이지에 이미지가 표시되지 않습니다. 이는 컴퓨터의 인터넷 속도가 상대적으로 느리고 컴퓨터에 열려 있는 소프트웨어가 더 많기 때문일 수 있습니다. 로딩 시간 초과로 인해 사진이 표시되지 않을 수 있습니다. 네트워크 속도를 차지하는 소프트웨어를 끄고 작업 관리자에서 확인할 수 있습니다. 2. 방문자가 너무 많으면 웹페이지에 사진이 표시되지 않는 경우, 우리가 방문한 웹페이지가 동시에 방문되었기 때문일 수 있습니다.
네트워크 연결은 정상인데 브라우저가 웹페이지에 접근할 수 없는 이유
Feb 19, 2024 pm 03:45 PM
브라우저에서 웹페이지를 열 수 없지만 네트워크는 정상입니다. 가능한 이유는 다양합니다. 이 문제가 발생하면 단계별로 조사하여 구체적인 원인을 파악하고 문제를 해결해야 합니다. 먼저, 웹페이지가 열리지 않는 현상이 특정 브라우저에서만 나타나는지, 아니면 모든 브라우저에서 웹페이지를 열 수 없는지 확인하세요. 하나의 브라우저에서만 웹 페이지를 열 수 없는 경우 Google Chrome, Firefox 등과 같은 다른 브라우저를 사용하여 테스트해 볼 수 있습니다. 다른 브라우저에서 페이지를 올바르게 열 수 있다면 해당 특정 브라우저에 문제가 있을 가능성이 높습니다.
웹페이지가 열리지 않는 경우 대처 방법
Feb 21, 2024 am 10:24 AM
웹 페이지가 열리지 않는 문제를 해결하는 방법 인터넷의 급속한 발전으로 인해 사람들은 정보를 얻고, 의사소통하고, 오락을 즐기기 위해 인터넷에 점점 더 의존하고 있습니다. 그러나 때때로 웹 페이지가 열리지 않는 문제에 직면하여 많은 문제를 야기합니다. 이 문서에서는 웹 페이지가 열리지 않는 문제를 해결하는 데 도움이 되는 몇 가지 일반적인 방법을 소개합니다. 먼저 웹페이지를 열 수 없는 이유를 파악해야 합니다. 가능한 원인으로는 네트워크 문제, 서버 문제, 브라우저 설정 문제 등이 있습니다. 다음은 몇 가지 해결 방법입니다. 네트워크 연결을 확인하세요. 먼저, 다음이 필요합니다.
메이투안 테이크아웃 가맹점 버전의 배송 시작 가격을 변경하는 방법
Mar 27, 2024 pm 07:20 PM
메이투안 테이크아웃 가맹점 에디션의 운영 과정에서 시작 배송 가격 설정은 중요한 연결 고리입니다. 합리적인 시작 배송 가격은 가맹점의 비용 관리에 도움이 될 뿐만 아니라 주문 금액을 어느 정도 늘려 전체 수익을 늘릴 수 있습니다. 그러나 많은 판매자는 최소 배송 가격을 수정하는 방법에 대해 잘 모릅니다. 따라서 다음 기사에서는 이 웹사이트의 편집자가 판매자를 위한 자세한 시작 가격 설정 가이드를 제공할 것입니다. 더 알고 싶으시면 다음 기사를 방문하여 알아보세요! 메이투안 테이크아웃 가맹점 센터에서 로그인 후 매장 설정을 입력한 후 매장 관리를 선택하세요. 매장 관리 페이지 상단의 스위치 탐색에서 배송 정보를 선택한 후 배송 지역 추가를 클릭하시면 작업이 완료됩니다. 위치를 추가하면 해당 배송비가 자동으로 표시됩니다. 주문을 완료하신 후 받으실 수 있습니다
웹 페이지에서 PHP를 여는 방법
Mar 22, 2024 pm 03:20 PM
웹 페이지에서 PHP 코드를 실행하려면 웹 서버가 PHP를 지원하고 적절하게 구성되어 있는지 확인해야 합니다. PHP는 세 가지 방법으로 열 수 있습니다: * **서버 환경:** 서버 루트 디렉터리에 PHP 파일을 넣고 브라우저를 통해 접근합니다. * **통합 개발 환경: ** 지정된 웹 루트 디렉터리에 PHP 파일을 배치하고 브라우저를 통해 액세스합니다. * **원격 서버:** 서버가 제공한 URL 주소를 통해 원격 서버에 호스팅된 PHP 파일에 액세스합니다.
Discuz Editor: 강력한 웹페이지 편집 도구
Mar 09, 2024 pm 06:06 PM
Discuz Editor: 특정 코드 예제가 필요한 강력한 웹 페이지 편집 도구입니다. 인터넷이 발달하면서 웹사이트 구축과 콘텐츠 편집이 점점 더 중요해지고 있습니다. 일반적인 웹 페이지 편집 도구인 Discuz 편집기는 웹 사이트 구축에 중요한 역할을 합니다. 풍부한 기능과 도구를 제공할 뿐만 아니라 사용자가 콘텐츠를 보다 편리하게 편집하고 게시할 수 있도록 도와줍니다. 이 글에서는 Discuz 편집기의 기능과 사용법을 소개하고, 독자들이 이를 더 잘 이해하고 사용할 수 있도록 몇 가지 구체적인 코드 예제를 제공합니다.
