67. (javascript/자바스크립트) 동적 레이아웃 생성 및 이벤트 지정 실시

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : javascript

/* =========================== */

​

/* =========================== */

[소스 코드]

 

console.log("[createMenu] : debug [1]"); 
var createMainLayout = document.createElement("div"); //객체 레이아웃 타입 지정
var createMainId = "select_container"; //객체 id 값 지정
var createMainStyle = "width:29%; height:30%; border:none; background-color:#3758b5;"; //객체 스타일 지정


console.log("[createMenu] : debug [2]"); 
createMainLayout.setAttribute("id", createMainId); //id 설정
createMainLayout.setAttribute("style", createMainStyle); //스타일 설정
createMainLayout.setAttribute("draggable", "true"); //이벤트 설정
createMainLayout.setAttribute("ondragstart", "drag(event)"); //이벤트 설정
createMainLayout.setAttribute("onclick", "btnClick(this)"); //이벤트 설정


console.log("[createMenu] : debug [3]"); 
var parentLayout = document.getElementById("parent_container"); //생성된 div를 붙일 부모
parentLayout.appendChild(createMainLayout);


console.log("[createMenu] : debug [4]"); 
document.getElementById(createMainId).addEventListener("touchmove", handleMove, false); //추가 이벤트 지정
document.getElementById(createMainId).addEventListener("touchend", handleEnd, false); //추가 이벤트 지정


console.log("[createMenu] : debug [5]"); 
/* 추가 이벤트 내부 함수 정의 실시 */

/* =========================== */