<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>드래그 앤 드롭 동적 생성</title>
<style>
html, body {margin:0; padding:0; }
#content { position:relative; width:100%; height:70vh; background-color:#f1f1f1; display:inline-block; overflow:scroll; }
.formdiv { width: 300px; height: 300px; display: inline-block; border: 1px solid #000; background-color: #000; position: absolute; cursor:move; left:0; top:0; }
</style>
<script>
// 시작위치
var startX = 0;
var startY = 0;
// 클릭위치
var clickX = 0;
var clickY = 0;
// 맨앞으로
var zIndex = 0;
function DragStartFunction(ev,el) {
if (el.style.left != undefined) {
startX = el.style.left;
startX = Number(startX.replace("px", ""));
}
if (el.style.top != undefined) {
startY = el.style.top;
startY = Number(startY.replace("px", ""));
}
clickX = ev.clientX - startX;
clickY = ev.clientY - startY;
}
function DragEndFunction(ev) {
var moveX = ev.clientX - clickX;
var moveY = ev.clientY - clickY;
ev.target.style.left = moveX + "px";
ev.target.style.top = moveY + "px";
zIndex++;
ev.target.style.zIndex = zIndex;
}
window.onload = function () {
document.getElementById("btn").onclick = function () {
var newDiv = document.createElement("div");
newDiv.className = "formdiv";
newDiv.setAttribute("draggable", true);
newDiv.setAttribute("ondragstart", "DragStartFunction(event,this)");
newDiv.setAttribute("ondragend", "DragEndFunction(event)");
// 구분을 위해 랜덤색상
newDiv.setAttribute("style", "background-color:#" + Math.round(Math.random() * 0xffffff).toString(16));
document.getElementById("content").appendChild(newDiv);
}
}
</script>
</head>
<body>
<a id="btn">ADD</a>
<div id="content"></div>
</body>
</html>
22. 1. 19.
Javascript 동적 드래그 앤 드롭 레이어 생성
피드 구독하기:
댓글 (Atom)
댓글 없음:
댓글 쓰기