Chapter10 드래그 앤 드롭 & 텍스트 편집 HTML5 Programming
Contents Chapter10 1. 드래그 앤 드롭 2. 텍스트 편집 3. 텍스트 선택 드래그 앤 드롭 & 텍스트 편집
드래그 앤 드롭 드래그 앤 드롭 마우스를 이용하여 어떠한 콘텐츠를 끌어다 놓는 것 드래그 앤 드롭 API의 브라우저 지원 현황 Chapter10 드래그 앤 드롭 마우스를 이용하여 어떠한 콘텐츠를 끌어다 놓는 것 드래그 앤 드롭 API의 브라우저 지원 현황 드래그 앤 드롭 & 텍스트 편집
드래그 속성 부여 draggable 속성 드래그 속성을 부여 Chapter10 draggable 속성 드래그 속성을 부여 true이면 드래그를 할 수 있는 것이고 false면 드래그를 못하게 됨 a 요소로 생성한 링크나 div 요소로 생성한 영역도 드래그가 가능 드래그 앤 드롭 & 텍스트 편집
이벤트 Chapter10 드래그 앤 드롭 관련 이벤트 드래그 앤 드롭 & 텍스트 편집
이벤트 Chapter10 드래그 앤 드롭 관련 이벤트 드래그 앤 드롭 & 텍스트 편집
데이터 전달 데이터 전달 드래그 앤 드롭으로 데이터를 교환하기 위해서는 DataTransfer 객체를 사용 Chapter10 데이터 전달 드래그 앤 드롭으로 데이터를 교환하기 위해서는 DataTransfer 객체를 사용 드래그를 시작할 때에는 DataTransfer 객체의 setData() 메서드를 사용하여 데이터를 보관하고 보관하여 전달된 데이터는 드롭할 때 DataTransfer 객체의 getData() 객체를 사용하여 데이터를 가져오게 됨 DataTransfer 객체의 메서드 드래그 앤 드롭 & 텍스트 편집
데이터 전달 Chapter10 데이터 전달 드래그 시작시 지정 데이터를 보관하기 위하여 사용하는 setData() 메서드에는 type과 data 두 개의 인수를 지정해야 함 setData() 메서드의 type 값 setData() 메서드를 사용하여 전달할 데이터를 보관하면 드롭 측에서는 데이터를 가져오기위하여 getData() 메서드를 사용하는데 인수로 지정할 type의 값은 반드시 setData() 메서드에서 지정한 type 값과 같아야 함 드래그 앤 드롭 & 텍스트 편집
데이터 전달 Chapter10 데이터 전달 드래그 앤 드롭 & 텍스트 편집
프로그램 10-1 Chapter10 01: <!DOCTYPE HTML> 02: <html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> 드래그 드롭 </title> 06: <style type="text/css"> 07: div {width: 200px; height: 200px; border: 1px solid; 08: float: left; margin-right:10px} 09: </style> 10: <script type="text/javascript"> 11: function dropset(event) 12: { 13: event.preventDefault(); 14: } 15: 16: function drag(event) 17: { 18: event.dataTransfer.setData("Text", event.target.id); 19: } 20: 21: function drop(event) 22: { 23: var data = event.dataTransfer.getData("Text"); 24: event.target.appendChild(document.getElementById(data)); 25: event.preventDefault(); 26: } 27: </script> 28: </head> 드래그 앤 드롭 & 텍스트 편집
프로그램 10-1 Chapter10 29: <body> 30: <div id="div1" ondrop="drop(event)" ondragover="dropset(event)"> 31: <img id="drag1" src="android.jpg" width="150" 32: draggable="true" ondragstart="drag(event)"> 33: </div> 34: 35: <div id="div2" ondrop="drop(event)" ondragover="dropset(event)"></div> 36: </body> 37: </html> 드래그 앤 드롭 & 텍스트 편집
포인터 변경 Chapter10 포인터 변경 포인터 변경 관련 속성 일반적으로 effectAllowed 속성은 드래그시 발생하는 dragstart 이벤트에 지정하고 dropEffect 속성은 드롭할 때 발생하는 dragenter 이벤트와 dragover 이벤트에서 사용 드래그 앤 드롭 & 텍스트 편집
포인터 변경 Chapter10 포인터 변경 드래그 앤 드롭 & 텍스트 편집
포인터 변경 포인터 변경 마우스 커서 위에 표시될 이미지 변경 관련 메서드 Chapter10 포인터 변경 마우스 커서 위에 표시될 이미지 변경 관련 메서드 드래그 중인 마우스 커서 위의 아이콘을 변경하는 setDragImage() 메서드의 인수로는 마우스 커서 위에 표시할 이미지 변수와 커서가 위치할 x좌표, y좌표를 지정 지정한 이미지를 드래그 아이콘의 이미지로 추가하는 역할을 하는 addElement() 메서드는 인수로 이미지 변수를 가짐 드래그 앤 드롭 & 텍스트 편집
포인터 변경 Chapter10 포인터 변경 드래그 앤 드롭 & 텍스트 편집
텍스트 편집 텍스트 편집 기존에 텍스트 편집이 불가능한 요소들까지 텍스트 편집이 가능하도록 지정할 수 있음 브라우저 지원 현황 Chapter10 텍스트 편집 기존에 텍스트 편집이 불가능한 요소들까지 텍스트 편집이 가능하도록 지정할 수 있음 브라우저 지원 현황 드래그 앤 드롭 & 텍스트 편집
편집 속성 부여 contenteditable 속성 특정 요소의 내용을 편집할 수 있도록 지정하는 역할 Chapter10 contenteditable 속성 특정 요소의 내용을 편집할 수 있도록 지정하는 역할 만약 값을 지정하지 않고 contenteditable 속성만을 지정한다면 자동으로 true의 의미를 갖음 속성의 값 드래그 앤 드롭 & 텍스트 편집
편집 속성 부여 Chapter10 편집 속성 부여 드래그 앤 드롭 & 텍스트 편집
편집 속성 부여 designMode 속성 페이지 전체에 편집 속성을 부여하고자 할 때 사용 Chapter10 designMode 속성 페이지 전체에 편집 속성을 부여하고자 할 때 사용 designMode 속성의 값으로는 on, off 두 가지를 지정할 수 있으며 편집을 가능하게 지정하기 위해서는 on을 지정하고 불가능하게 하기 위해서는 off를 지정하면 됨 드래그 앤 드롭 & 텍스트 편집
텍스트 편집 execCommand() 메서드 Chapter10 execCommand() 메서드 contenteditable 속성이나 designMode 속성을 사용하여 편집이 가능하도록 지정한 상태에서 execCommand() 메서드를 사용하여 다양한 텍스트 편집을 할 수 있음 드래그 앤 드롭 & 텍스트 편집
텍스트 편집 execCommand() 메서드 document 객체에 속해 있으며 세 개의 인수를 지정 Chapter10 execCommand() 메서드 document 객체에 속해 있으며 세 개의 인수를 지정 첫 번째 인수인 commandId 값은 선택한 텍스트 영역에 대한 명령 두 번째 인수는 첫 번째 지정한 commandId에 대한 UI를 표시할지 여부 세 번째 인수는 commandId가 필요로 하는 추가 정보를 지정 드래그 앤 드롭 & 텍스트 편집
텍스트 편집 Chapter10 텍스트 편집 관련 메서드 드래그 앤 드롭 & 텍스트 편집
텍스트 편집 Chapter10 commandId 값 드래그 앤 드롭 & 텍스트 편집
텍스트 편집 Chapter10 commandId 값 드래그 앤 드롭 & 텍스트 편집
프로그램 10-2 Chapter10 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> 텍스트 편집 </title> 06: <style type="text/css"> 07: div {width: 700px; height: 200px; border: 1px solid; 08: float: left; margin-right:10px} 09: input {width: 100px; height: 30px} 10: </style> 11: <script type="text/javascript"> 12: window.onload = function() 13: { 14: var editor = document.getElementById("editor"); 15: if (editor.isContentEditable) 16: { 17: editor.focus(); 18: } 19: }; 20: 21: function setBold() 22: { 23: document.execCommand("bold"); 24: } 25: 26: function setItalic() 27: { 28: document.execCommand("italic"); 29: } 드래그 앤 드롭 & 텍스트 편집
프로그램 10-2 Chapter10 31: function setSubscript() 32: { 32: { 33: document.execCommand("subscript"); 34: } 35: 36: function setSuperscript() 37: { 38: document.execCommand("superscript"); 39: } 40: 41: function setSelectAll() 42: { 43: document.execCommand("selectAll"); 44: } 45: 46: function setUnselect() 47: { 48: document.execCommand("unselect"); 49: } 50: 51: function setUndo() 52: { 53: document.execCommand("undo"); 54: } 55: </script> 56: </head> 드래그 앤 드롭 & 텍스트 편집
프로그램 10-2 Chapter10 57: <body> 58: <input type="button" value="굵게" onclick="setBold();"> 59: <input type="button" value="기울게" onclick="setItalic();"> 60: <input type="button" value="아래첨자" onclick="setSubscript();"> 61: <input type="button" value="윗첨자" onclick="setSuperscript();"> 62: <input type="button" value="모두 선택" onclick="setSelectAll();"> 63: <input type="button" value="선택 취소" onclick="setUnselect();"> 64: <input type="button" value="되돌리기" onclick="setUndo();"><br><br> 65: <div id="editor" contenteditable></div> 66: </body> 67: </html> 드래그 앤 드롭 & 텍스트 편집
텍스트 선택 텍스트 선택 선택한 텍스트에 대한 정보를 얻어 올 수 있음 브라우저 지원 현황 Chapter10 드래그 앤 드롭 & 텍스트 편집
텍스트 선택 객체 생성 텍스트 선택 객체 생성 텍스트 선택 상태에 대한 정보를 가져오기 위해서는 우선 객체를 생성을 해야 함 Chapter10 텍스트 선택 객체 생성 텍스트 선택 상태에 대한 정보를 가져오기 위해서는 우선 객체를 생성을 해야 함 객체 생성은 window 객체나 document 객체의 getSelection() 메서드를 사용 브라우저의 호환성을 생각한다면 window 객체의 getSelection() 메서드를 사용하기를 권장함 getSelection() 메서드 드래그 앤 드롭 & 텍스트 편집
텍스트 선택 객체 생성 Chapter10 텍스트 선택 객체 생성 드래그 앤 드롭 & 텍스트 편집
텍스트 선택 지정 Chapter10 선택 영역 지정 관련 메서드 및 속성 드래그 앤 드롭 & 텍스트 편집
텍스트 선택 지정 Chapter10 텍스트 선택 지정 드래그 앤 드롭 & 텍스트 편집
텍스트 선택 지정 Chapter10 마우스 커서 지정 만약 어떤 영역 안에 입력된 텍스트에서 특정 위치로 커서를 이동시키고자 할 때는 collapse() 메서드를 사용 마우스 커서 지정 관련 메서드와 속성 드래그 앤 드롭 & 텍스트 편집
텍스트 선택 지정 Chapter10 마우스 커서 지정 드래그 앤 드롭 & 텍스트 편집