Javascript鼠标拖拽事件

Javascript鼠标拖拽事件

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style>
#box{
width:200px;
height:200px;
background: yellow;
cursor:pointer;
position: absolute;
left:0;
top:100;
}
</style>
</head>
<body>
<h1>鼠标拖拽效果</h1>
<div id=”box”></div>
<script>
var box = document.getElementById(‘box’);
// 1.给box绑定鼠标按下事件
box.onmousedown = function(ent2){
// 1.2 鼠标按下样式改变
this.style.background = ‘green’;
this.style.cursor = ‘move’;
// 3.1获取鼠标点在div的位置
var ent2 = ent2 || window.event;
var mousex = ent2.clientX – box.offsetLeft;
var mousey = ent2.clientY – box.offsetTop;
// 1.3 鼠标按下绑定鼠标移动事件
window.document.onmousemove = function(ent){
// 处理兼容新
var ent = ent || window.event;
var x = ent.clientX;
var y = ent.clientY;
// 3.2 通过鼠标移动的位置减去鼠标点在div的位置 进行定位
box.style.left = x-mousex+’px’;
box.style.top = y-mousey+’px’;
}
}
  // 2.box绑定鼠标抬起事件
box.onmouseup = function(){
// 2.1鼠标抬起样式回复默认
this.style.background = ”;
this.style.cursor = ”;
// 2.3鼠标抬起移动事件为null
window.document.onmousemove = null;
}
 </script>
</body>
</html>

看不清的点我下载–>>5

点赞
  1. HaroldDox说道:

    谢谢博主提供虽然看不懂

  2. HaroldDox说道:

    cialis no prescription п»їbuy cialis online buy cialis

  3. RobertJaT说道:

    挺好!

  4. 无怨无悔说道:

    &lt;button&gt;点击修改窗口大小&lt;/button&gt;

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据