javascriptを使って、要素の移動を書いてみた。

javascript

javascriptを使って、要素の移動を書いてみた。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>要素の移動</title>
<style>
.box{

width:200px;
height:200px;
position:absolute;
z-index:1000;

}

.r{
background-color:red;
}

.g{
background-color:green;
}


.b{
background-color:blue;
}

 

.drag{
z-index:1001;
}


</style>
</head>
<script type="text/javascript">
window.addEventListener('load',pageLoad,false);

function pageLoad(event){
var elem = document.getElementsByClassName('box');

for(var i = 0 ; i < elem.length ; i++){

elem[i].addEventListener('mousedown',m_click,false);


}

var m_x;
var m_y;



function m_click(event){
this.classList.add("drag");
m_x = event.pageX - this.offsetLeft;
m_y = event.pageY - this.offsetTop;

document.body.addEventListener('mousemove',mmove,false);

}

function mmove(event){
var drag = document.getElementsByClassName("drag")[0];
drag.style.top = event.pageY - m_y + "px";
drag.style.left = event.pageX - m_x + "px";

drag.addEventListener('mouseup',m_up,false);
document.body.addEventListener('mouseleave',m_up,false);
}

function m_up(event){
var drag = document.getElementsByClassName("drag");

document.removeEventListener("mousemove",mmove,false);
document.removeEventListener("mouseup",m_up,false);
this.classList.remove("drag");


}

}
</script>
<body>
<div class="box r">
</div>
<div class="box g">
</div>
<div class="box b">
</div>


</body>
</html>