다연이네

[days06] draggable()와 마우스 관련 이벤트 본문

Web/JavaScript

[days06] draggable()와 마우스 관련 이벤트

　다연　 2020. 12. 16. 21:10
반응형

해당 div태그들을 마우스 좌측 버튼을 이용해 드래그(이동)할 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!--   <link rel="stylesheet" href="/resources/demos/style.css"> -->
<!-- 내pc에서 찾고 있음 -> 앞에 https://붙혀주자 그래도 못찾아  https://code.jquery.com/-->
<!-- 나중에 웹사이트 만들때 경로 맞춰주란 소리다 -->
  <link rel="stylesheet" href="https://code.jquery.com/resources/demos/style.css">
  <style>
  .draggable { 
  	width: 150px; 
  	height: 150px; 
  	padding: 0.5em; 
  	border: 1px solid gray;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <script>
  $( function() {
	  //draggable() 함수 	jquery-ul.js 스크립트 파일 안에 선언된 함수
    $( ".draggable" ).draggable();
  } );
  </script>
  </head>
  <body>
<div class="draggable" class="ui-widget-content">
  <p>컴퓨터</p>
</div>
<div class="draggable" class="ui-widget-content">
  <p>TV</p>
</div>
<div class="draggable" class="ui-widget-content">
  <p>침대</p>
</div>
<div class="draggable" class="ui-widget-content">
  <p>책상</p>
</div>
<div class="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>
</body>
</html>

 

알아두기!!

<script>
$("document").ready(function() {
		
	}); //얘를 줄여서
	
//이렇게 쓴다
$(function (){ //백프로 같은 코딩 
		
	});
</script>

 

마우스 관련 이벤트

1. onmouseover : 해당 영역위에 커서가 진입하는 순간 발생

2. onmouseout  : 해당 영역에서 커서가 빠져나가는 순간 발생

3. onmousedown : 해당 객체의 영역에서 마우스 버튼이 눌려지는 순간 발생

4. onmouseup   : 해당 객체의 영역에서 마우스 버튼이 떼는 순간 발생

5. onmousemove : 해당 객체의 영여겡서 커서가 움직이는 순간 발생 

 

 

 1. clientX, clientY 

클라이언트 영역 내의 가로,세로 좌표 제공 (클라이언트 영역 : 현재 보이는 브라우저 화면이 기준이다)

clientX : 브라우저 페이지에서의 X좌표 위치를 반환하나 스크롤은 무시하고 해당 페이지의 상단을 0으로 측정

clientY : 브라우저 페이지에서의 Y좌표 위치를 반환하나 스크롤은 무시하고 해당 페이지의 상단을 0으로 측정

 

 2. offsetX, offsetY 

화면 기준이 아니라 이벤트 대상 기준

(화면 중간에 있는 박스 내부에서 클릭한 위치를 찾을 때, 해당 박스의 왼쪽 모서리 좌표가 0이된다)

전체 문서를 기준으로 한다(스크롤 화면 포함).

offsetX : 이벤트 대상 객체에서의 상대적 마우스 x좌표 위치를 반환

offsetY : 이벤트 대상 객체에서의 상대적 마우스 y좌표 위치를 반환

 

 3. pageX, pageY 

전체 문서를 기준으로 x,y 좌표를 반환 한다. (스크롤 화면을 포함해서 측정)

pageX : 브라우저 페이지에서의 x좌표 위치를 반환

pageY : 브라우저 페이지에서의 Y좌표 위치를 반환

 

 4. screenX, screenY 

모니터 화면을 기준으로 좌표 제공. 

브라우저 화면이 아니라 자신의 모니터 화면 전체를 기준으로 좌표를 측정한다.

screenX : 전체 모니터 스크린에서의 x좌표 위치를 반환

screenY :전체 모니터 스크린에서의 y좌표 위치를 반환

 

 

각 박스들을 파란 부분을 왼쪽 마우스를 누르며 드래그할 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
.myDiv{
	background: #f1f1f1;
	text-align: center;
	border: 1px solid #d3d3d3;
	position: absolute;
	z-index: 9;
}
.myDivHeader{
	padding: 10px;
	cursor: move;
	z-index: 10px;
	background: #2396F3;
	color: #fff;
}
</style>

</head>
<body>
<!--  .myDiv>.myDivHeader+p*3  -->
 
 <div id="myDiv1" class="myDiv">
 	<div id="myDiv1Header" class="myDivHeader">Click Here</div>
 		<p>DragDrop</p>
 		<p>DragOver</p>
 		<p>Box</p>
 </div> 
 <div id="myDiv2" class="myDiv">
 	<div id="myDiv2Header" class="myDivHeader">Click Here</div>
 		<p>DragDrop</p>
 		<p>DragOver</p>
 		<p>Box</p>
 </div> 
 <div id="myDiv3" class="myDiv">
 	<div id="myDiv3Header" class="myDivHeader">Click Here</div>
 		<p>DragDrop</p>
 		<p>DragOver</p>
 		<p>Box</p>
 </div> 

<script>
	function draggable(elem) {
		var pos1 = 0, pos2 = 0; //이동한 xy좌표값
		var pos3 = 0, pos4 = 0; // xy좌표값
		
		if (document.getElementById(elem.id+"Header")) { //myDiv1Header 뜻함
			document.getElementById(elem.id+"Header").onmousedown = dragMouseDown;
		//onmouserdown할때 dragMouseDown함수를 등록하겠다
		}
		
		//클로저(중첩함수)
		function dragMouseDown(e) { //드래그하기위해 마우스 다운할때
			e = e || window.event; //브라우저따라 안먹을 수 있으니 두개 써주기
			
			//alert(e.button); //마우스 클릭 - 왼0 휠1 오2
			if(e.button==0){ //마우스 좌측 버튼 클릭시
			pos3 = e.clientX;
			pos4 = e.clientY;
			
			//드래그 드롭 작업을 위한 클릭한 위치좌표 얻어오기
			//console.log(pos3+" / "+pos4); //클릭한 위치값
			console.log(elem.offsetLeft+" / "+elem.offsetTop);  //위치값
			//left="8px" -> 8 변환 필요
			//offset= 8 (숫자형으로 돌려주기 때문에 변환 필요 없음)
			
			document.onmousemove= elementDrag; //문서 전체에서 마우스 move, up 일어남
			document.onmouseup= closeDragElement;
			}
		}
		
		function elementDrag(e) {
			//console.log("document.onmousemove...elementDrag");
			e=e||window.event;
			
			pos1 = pos3 - e.clientX; //이동한 거리x 
			pos2 = pos4 - e.clientY;  //이동한 거리y
			
			//console.log(pos1+" / "+pos2);
			
			elem.style.left =(elem.offsetLeft - pos1)+"px"; //+"px" 주의
			elem.style.top =(elem.offsetTop - pos2)+"px"; //+"px" 주의
			
			//원래 위치값도 옮겨줘야함 (3번쨰로 옮기면 2번째로 옮겨진 그 위치가 원래 위치값이 되니까 )
			pos3 = e.clientX;
			pos4 = e.clientY;
			
		}
		
		function closeDragElement(e) {
			//console.log("document.onmouseup...closeDragElement");
			
			document.onmousemove=null;
			document.onmouseup= null;
		}
	}
	
	//$(".draggable").draggable();
	draggable(document.getElementById("myDiv1"));
	draggable(document.getElementById("myDiv2"));
	draggable(document.getElementById("myDiv3")); 
	
	

</script>
</body>
</html>
반응형
저작자표시 비영리

'Web > JavaScript' 카테고리의 다른 글

[days06] 1) js 컬렉션 2)DOM  (0) 2020.12.16
[days06] 공 튀기기  (0) 2020.12.16
[days06] 클로저(Closure) (중요! 취업질문 多)  (0) 2020.12.16
[days06] js call()/apply() 메소드  (0) 2020.12.16
[days05] js 객체와 함수  (0) 2020.12.15
'Web/JavaScript' Related Articles more
Comments