JS拖拽效果
2018-07-20 來源：open-open
JS拖拽效果，得到鼠標事件，可拓展功能，改變元素的寬和高！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
margin-top: 10px;
width: 200px;
height: 150px;
background: #dadada;
position: absolute;
cursor:move;
}
</style>
</head>
<body>
<div id="div" ></div>
<script>
var drag=false;
var x, y,movex,movey;
var movediv =document.getElementById('div');
movediv.onmousedown=function(){
drag=false;
x = window.event.clientX; /*當前鼠標坐標*/
y =window.event.clientY;
movex = movediv.offsetLeft; /*當前元素坐標*/
movey =movediv.offsetTop
}
document.onmousemove=function(){
if(drag) return false;
movediv.style.top= movey + window.event.clientY -y +'px';
movediv.style.left= movex + window.event.clientX -x +'px';
}
document.onmouseup=function(){drag=true}
</script>
</body>
</html>
標簽：
版權(quán)申明：本站文章部分自網(wǎng)絡，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。
最新資訊
熱門推薦