클릭 드레그 하면 따라다니는 div

[.js] div 의 이동 2017. 9. 7. 15:04

<html>
<head>
</head>

<script language="javascript" >

/*Click and drag to follow the div */

var div_a1;

function init(){
div_a1 = document.getElementById('a1');
var groundDiv = document.getElementById('groundDiv');
groundDiv.addEventListener('mousedown', mouseDown);
groundDiv.addEventListener('mousemove', mouseMove);
groundDiv.addEventListener('mouseup', mouseUp);
}

var isClick = false;
function mouseDown(e){
isClick = true;
}

function mouseMove(e){
if( isClick == true ){
div_a1.style.left = e.offsetX - 20 + 'px';
div_a1.style.top = e.offsetY - 20 + 'px';
}
}

function mouseUp(e){
isClick = false;
}

</script>
<body onload="init();" >
<div id="groundDiv" style="position:relative; width:99%; height:99%; border:0x solid black;"></div>
<div id='a1' style="position:absolute; width:3px; height:3px; border:2px solid black;top:2px;left:3px " ></div>
</body>
</html>

'[.js] div 의 이동' 카테고리의 다른 글

div 회전 (0)	2017.09.07
한 점을 기준으로 + 를 회전시킴 (0)	2017.09.06
click 누르면 div를 생성해서 특정 위치에 위치시킨다. (0)	2017.09.06