javascript 마우스 드래그 층 효과 코드 구현

javascript 마우스 드래그 층 효과 코드 구현: 이 장 에 서 는 div 의 임 의 드래그 효 과 를 어떻게 실현 하 는 지 소개 합 니 다. 단순히 드래그 효과 만 으로 는 실제 적 인 의미 가 없 을 수도 있 지만 많은 지식 점 과 관련 되 어 있 습 니 다. 이 기능 을 습득 한 동료 들 은 많은 지식 에 대해 명확 하 게 파악 할 수 있 습 니 다.다음은 이 기능 을 어떻게 실현 하 는 지 실례 를 통 해 소개 한다.코드 인 스 턴 스 는 다음 과 같 습 니 다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div      -    </title>
<style type="text/css">
#eldiv
{
  width:140px;
  height:100px;
  background:#EEE;
  position:absolute;
  left:117px;
  top:124px;
}
</style>
<script type="text/javascript"> 
var isDrag = false; 
function isIE()
{ 
  if(navigator.userAgent.indexOf("MSIE")>0)
  {
     return true;
  } 
  else
  {
     return false;
  } 
}
 
function getStyle(object,attrName)
{
  if(object.currentSyle) 
  {
     return object.currentSyle[attrName];
  }
  if(window.getComputedStyle)
  {
     return window.getComputedStyle(object,null)[attrName];
  }
}
function addListener(element,e,fn)
{ 
  if(isIE())
  {
     element.attachEvent("on" + e,fn);
  } 
  else
  {
     element.addEventListener(e,fn,false);
  } 
}
function drag(e)
{ 
  var e = e || window.event; 
  var element = e.srcElement || e.target; 
  if(e.preventDefault)
  {
    e.preventDefault();
  }
  else 
  {
    e.returnvalue=false;
  }
  isDrag = true;  
  var relLeft = e.clientX - parseInt(getStyle(element,"left")); 
  var relTop = e.clientY - parseInt(getStyle(element,"top")); 
  element.onmouseup = function(){ isDrag = false; } 
  document.onmousemove = function(e_move)
  { 
    var e_move = e_move || window.event; 
    if(isDrag)
    { 
      element.style.left=e_move.clientX - relLeft + "px"; 
      element.style.top=e_move.clientY - relTop + "px"; 
      return false; 
    } 
  } 
} 
window.onload = function() 
{ 
  var eldiv = document.getElementById("eldiv"); 
  addListener(eldiv,"mousedown",drag); 
} 
</script> 
<body>
<div id="eldiv"></div> 
</body>
</html>

메모: 편집 기 를 실행 한 후 F5 를 누 르 면 웹 페이지 를 새로 고침 하면 프 리 젠 테 이 션 을 볼 수 있 습 니 다.상기 코드 는 우리 가 원 하 는 div 마우스 드래그 기능 을 실현 합 니 다. 다음은 실현 과정 을 간단하게 소개 합 니 다. 첫째, 실현 원리: 원 리 는 매우 간단 합 니 다. 마 우 스 를 눌 렀 을 때 isDrag 를 true 로 설정 합 니 다. 즉, 드래그 할 수 있 고 현재 마우스 포인터 가 div 상단 과 왼쪽 가장자리 의 거 리 를 계산 합 니 다.div 에서 마우스 포인 터 를 이동 할 때 div 의 좌 표를 현재 포인터 clientX 와 clientY 값 으로 계속 설정 하여 왼쪽 가장자리 와 위 가장자리 의 거 리 를 줄 이면 드래그 효 과 를 실현 합 니 다.2. 코드 설명: 1. var isDrag = false, 드래그 할 수 있 는 지 여 부 를 설명 하 는 표 지 를 설정 합 니 다. 기본 상태 에서 드래그 할 수 없습니다.2. function isIE (), IE 브 라 우 저 여 부 를 판단 합 니 다. 더 많은 관련 내용 은 자바 script 에서 브 라 우 저의 유형 과 버 전 1 장 을 어떻게 판단 하 는 지 참조 할 수 있 습 니 다.3. function getStyle (object, attrName) {}, 지정 한 대상 의 지정 한 스타일 속성의 속성 값 을 가 져 옵 니 다. 더 많은 관련 내용 은 js 가 내부 추출 스타일 시트 에서 정의 하 는 속성 값 1 장 을 가 져 오 는 방법 을 참조 할 수 있 습 니 다.4. function addListener (element, e, fn) {}, 이벤트 처리 함수 등록, 더 많은 관련 내용 은 javascript 가 이벤트 처리 함수 1 장 을 어떻게 등록 하 는 지 참조 할 수 있 습 니 다.5. function drag (e) {}, 드래그 를 어떻게 처리 하 는 지 규정 합 니 다.6. var e = e | window. event, 이벤트 대상 을 가 져 옵 니 다. javascript 이벤트 대상 매개 변 수 를 참조 하여 각 브 라 우 저 쓰기 1 장 을 호 환 할 수 있 습 니 다.7. var element = e. srcElement | e. target, 이벤트 대상 을 가 져 오 면 srcElement 이벤트 속성 과 target 이벤트 속성 을 참조 할 수 있 습 니 다.8. if (e. preventDefault) {} 은 기본 동작 을 막 기 위해 javascript 의 preventDefault () 방법 과 javascript 의 returnValue 이벤트 속성 을 참조 할 수 있 습 니 다.9. isDrag = true, true 로 설정 하면 드래그 할 수 있 음 을 설명 합 니 다.10. var relLeft = e. clientX - parseInt (getStyle (element, left)), 마우스 포인터 거리 div 왼쪽 가장자리 거 리 를 계산 합 니 다.11. var relTop = e. clientY - parseInt (getStyle (element, top)), 마우스 포인터 거리 div 상단 의 거 리 를 계산 합 니 다.12. element. onmouseup = function () {isDrag = false;}, 마 우 스 를 놓 으 면 끌 수 없습니다.13. document. onmousemove = function (e move) {}, div 에 onmousemove 이벤트 처리 함 수 를 등록 합 니 다.14.element.style.left=e_move. clientX - relLeft + "px", 마 우 스 를 끌 때 div 의 left 속성 값 을 계산 합 니 다.15.element.style.top=e_move. clientY - relTop + "px", 마 우 스 를 끌 때 div 의 top 속성 값 을 계산 합 니 다.16. window. onload = function () {} 페이지 가 완전히 불 러 온 후에 코드 를 실행 합 니 다.17. var eldiv = document. getElement ById ("eldiv"), div 대상 획득.18. addListener (eldiv, "mousedown", drag), 실행 함 수 는 이벤트 처리 함 수 를 등록 합 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

javascript 마우스 드래그 층 효과 코드 구현

좋은 웹페이지 즐겨찾기