RestController / 7

 

 

 

 

 

 

 

 

 

 

- 모달창 클릭하면 닫히는데, 모달창을 클릭하면 안닫히고 모달 바깥을 클릭하면 닫히게 하는 코드 

      this.onclick = (e)=>{
	      
	      if(e.target != e.currentTarget)
	      	return;
	      	
	      this.remove();
      };

 

 

 

 

<modal-panel data-ok-button=".btn-ok" data-show="false">
//true면 페이지 로드되자마자 뜨고,fasle면 플러스 버튼을 클릭해야만 모달이 뜸

let show = false;
      if(this.hasAttribute("data-show"))
      	show = JSON.parse(this.getAttribute("data-show"));
      
      console.log("----------------------------");
      console.log(typeof this.getAttribute("data-show"));
      console.log(typeof show);
      console.log("----------------------------");
      
      if(show)
	      this.classList.remove("d-none");
      else
      	      this.classList.add("d-none");

 

 

 

 

 

- 웹은 원격에서 '남'이 보낸 파일이다

 

 

- 자스를 쓰지 않고 얘가 클릭됐어~라고 할수 있는 태그는 라벨태그다 

 

 

 

- 드래그 영역 안에 들어간 상태 : enter / 그 영역을 떠난 상태 : leave

 

 

- 드래그 종류 : dragenter,dragleave,dragover,dragdrop 

 

 

 

 

- 사진 올렸다 내렸다 하면 배경색 바뀌기 (드래그앤드롭)

			imgDropZone.ondragenter = function(e){
				console.log("enter")
				imgDropZone.classList.add("invalid-for-drop");
			};
			
			imgDropZone.ondragleave = function(e){
				console.log("leave")
				imgDropZone.classList.remove("invalid-for-drop");
			};

 

 

 

 

			//꺼내고자 하는 데이터 타입을 알수있음
			imgDropZone.ondragover = function (e) {
				e.preventDefault();

				console.log("over")

				for (let att in e.dataTransfer)
					console.log(att)
			};

꺼내면 이런 속성들이 나옴

 

 

 

 

				//특정값을 찾아주는 메서드:indexOf
				e.dataTransfer.types.indexOf("Files")

 

 

 

 

 

- 이미지 파일만 드래그앤드롭 해놓을수있게 해놓는 코드. 이미지 외에 url 이런거 들어가면 XXX

let valid = e.dataTransfer.types.indexOf("Files") >= 0;
	if(valid)
		console.log("내려놓으삼");