'Front-End/jQuery' 카테고리의 글 목록 (2 Page)

[jQuery] 외부 파일 드래그 드롭 구현

Front-End/jQuery 2017. 1. 12. 19:54

외부 파일 드래그 드롭 구현

1. 구현

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .drop { width: 300px; height:300px; border: 1px solid black; } </style> </head> <hr> <div class="drop" id="drop"> <img id="dropped"/> </div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script> $(function(){ $('#drop').on({ 'drop':function(e){ var f=e.originalEvent.dataTransfer.files[0]; var reader = new FileReader(); $(reader).on('load',function(){ $('#dropped').attr('src',reader.result); }); reader.readAsDataURL(f); e.preventDefault(); }, 'dragover':function(e){ e.preventDefault(); } }) }); </script>

1) e.originalEvent.dataTransfer.files[0]

- 드롭된 파일(file객체) 접근한다

2) FileReader

- 파일을 읽는 객체를 경유하여 단지 <img> 속성에 이미지를 넣는다

- 업로드 처리는 $.post 같은 ajax 통신을 이용하여 처리한다

'Front-End > jQuery' 카테고리의 다른 글

[jQuery]jQuery의 ajax - 단축 메서드와 jqXHR객체 (0)	2018.07.17
[jQuery] jQuery의 ajax - 저수준 인터페이스 메서드 (0)	2018.07.17
[jQuery] 다른 어플 텍스트 드랍앤 드롭 (0)	2017.01.12
[jQuery] 드래그 & 드랍 구현 - on()[이벤트리스너] (0)	2017.01.12
[jQuery] 이벤트 리스너에 매개변수 전달 (0)	2017.01.06

리딩리드

,

[jQuery] 다른 어플 텍스트 드랍앤 드롭

Front-End/jQuery 2017. 1. 12. 19:28

다른 어플 텍스트 드랍앤 드롭

1. 구현

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .drop { width: 300px; height:300px; border: 1px solid black; } </style> </head> <hr> <div class="drop" id="drop"></div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script> $(function(){ $('#drop').on({ 'drop':function(e){ $(this).text(e.originalEvent.dataTransfer.getData('text')); e.preventDefault(); }, 'dragover':function(e){ e.preventDefault(); } }) }); </script>

- HTML : text/html

- XML : text/xml

- 파일 리스트 : text/uri-list(파일리스트)

'Front-End > jQuery' 카테고리의 다른 글

[jQuery] jQuery의 ajax - 저수준 인터페이스 메서드 (0)	2018.07.17
[jQuery] 외부 파일 드래그 드롭 구현 (0)	2017.01.12
[jQuery] 드래그 & 드랍 구현 - on()[이벤트리스너] (0)	2017.01.12
[jQuery] 이벤트 리스너에 매개변수 전달 (0)	2017.01.06
[jQuery] 이벤트 발생시 키 정보 - altKey, ctrlKey, shiftKey, which (0)	2017.01.06

리딩리드

,

[jQuery] 드래그 & 드랍 구현 - on()[이벤트리스너]

Front-End/jQuery 2017. 1. 12. 19:13

드래그 & 드랍 구현 - on()[이벤트리스너]

1. 정의

- on()와 드래그&드랍 리스너를 이용하여 구현

1) 드래그 & 드롭 이벤트

분류	이벤트	발생타이밍
드래그	dragstart	드래그를 시작
	drag	드래그 중
	dragend	드래그 종료
드롭	dragenter	드래그 요소가 드롭 영역에 들어감
	dragover	드래그 요소가 드롭 영역에 있다
	dragleave	드래그 요소가 드롭 영역 벗어남
	drop	드롭

2. 예제

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .main{ width: 300px; height:300px; border: 1px solid black; } .drop { width: 300px; height:300px; border: 1px solid black; } </style> </head> <div class="main"> <img src="small.png" id="drag" draggable="true"/> </div> <hr> <div class="drop" id="drop"></div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script> $(function(){ $('#drag').on({ //드래그 시작시 요소 id 저장 'dragstart':function(e){ e.originalEvent.dataTransfer.setData('text',e.target.id); $(this).css('border','solid 2px Red'); }, //드래그 종료 'dragend':function(e){ $(this).css('border','none'); } }); $('#drop').on({ 'dragenter':function(e){ $(this).css('background-color','#fc0'); }, 'dragleave':function(e){ $(this).css('background-color','#ffc'); }, //브라우저 표중 동작 취소 'dragover':function(e){ e.preventDefault(); }, 'drop':function(e){ $(e.target).append($('#'+e.originalEvent.dataTransfer.getData('text'))); e.preventDefault(); } }); }); </script>

1) draggable = true

- 드래그 하고자 하는 태그에 속성을 부여한다

a. 기본으로 true로 정해진 태그

- 선택된 텍스트

- href

- src

2) DataTransfer

- 드래그 정보 관리

- 정보 셋팅: setData(키,값)

- e.originalEvent.dataTransfer.setData('text',e.target.id);

- 정보 취득 : getData(키)

- +e.originalEvent.dataTransfer.getData('text')

- 키 값으로 텍스트, 혹은 url 지정

3) preventDefault

- 브라우저의 표중 동작이 우선처리되어 드롭 조작을 방해 할수 있다

- 기본 동작을 취할 수 있도록 설정

4) originalEvent 프로퍼티

- 드래그&드롭의 고유 이벤트 프로퍼티

- jQuery : e.originalEvent.dataTransfer

- javascript : e.dataTransfer

'Front-End > jQuery' 카테고리의 다른 글

[jQuery] 외부 파일 드래그 드롭 구현 (0)	2017.01.12
[jQuery] 다른 어플 텍스트 드랍앤 드롭 (0)	2017.01.12
[jQuery] 이벤트 리스너에 매개변수 전달 (0)	2017.01.06
[jQuery] 이벤트 발생시 키 정보 - altKey, ctrlKey, shiftKey, which (0)	2017.01.06
[jQuery] 이벤트 발생 시 마우스 정보 - screenX, screenY, pageX, pageY, clienX, clientY, offsetX, offsetY (0)	2017.01.06

리딩리드

,

[jQuery] 이벤트 리스너에 매개변수 전달

Front-End/jQuery 2017. 1. 6. 17:13

이벤트 리스너에 매개변수 전달

1. 방법

1) 예제

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <form> <input type="button" id="b1" value="차"/> <input type="button" id="b2" value="비행기"/> </form> <div id="result"></div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ //페이지에 표시 var onclick = function(e){ $('#result').text(e.data.answer); } //이벤트 리스너 등록 $('#b1').click({answer : 'car'}, onclick); $('#b2').click({answer : 'plane'}, onclick); }); </script>

2) on() 이용방법

- $('#b1').on('click', {answer : 'apple'}, onclick);

'Front-End > jQuery' 카테고리의 다른 글

[jQuery] 다른 어플 텍스트 드랍앤 드롭 (0)	2017.01.12
[jQuery] 드래그 & 드랍 구현 - on()[이벤트리스너] (0)	2017.01.12
[jQuery] 이벤트 발생시 키 정보 - altKey, ctrlKey, shiftKey, which (0)	2017.01.06
[jQuery] 이벤트 발생 시 마우스 정보 - screenX, screenY, pageX, pageY, clienX, clientY, offsetX, offsetY (0)	2017.01.06
[jQuery] 여러개의 이벤트 리스너 한 번에 설정 - on() (0)	2017.01.06

리딩리드

,

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

'Front-End/jQuery'에 해당되는 글 36건

[jQuery] 외부 파일 드래그 드롭 구현

'Front-End > jQuery' 카테고리의 다른 글

[jQuery] 다른 어플 텍스트 드랍앤 드롭

'Front-End > jQuery' 카테고리의 다른 글

[jQuery] 드래그 & 드랍 구현 - on()[이벤트리스너]

'Front-End > jQuery' 카테고리의 다른 글

[jQuery] 이벤트 리스너에 매개변수 전달

'Front-End > jQuery' 카테고리의 다른 글

공지사항

카테고리

태그목록

글 보관함

달력

링크

리딩리드

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바