欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

js如何写鼠标拖动图片

更新时间: 2014-01-05 01:50:43 责任编辑: Author_N1

 

js怎么写鼠标拖动图片
js怎么写鼠标拖动图片  就跟拖动浏览器滚动条一样   我想用原生js写
--参考方法--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#draggable {
width:100px;
height:100px;
position:absolute;
top:50px;
left:350px;
background-color:red;
}

</style>
</head>
<body>
<div id='draggable'>draggable</div>

<script>
var data={};
function draggable(e){
var el = e.target;
data = {
startLeft: el.offsetLeft,
startTop: el.offsetTop,
left: el.offsetLeft,
top: el.offsetTop,
startX: e.pageX,
startY: e.pageY,
eTarget:el
}
document.addEventListener('mousedown',doDown);
document.addEventListener('mousemove',doMove);
document.addEventListener('mouseup',doUp);
}
function drag(e){
var d = data;
var l=d.startLeft + e.pageX - d.startX;
var t = d.startTop + e.pageY - d.startY;
data.left = l;
data.top=t;
}
function applyDrag(){
var d = data;
d.eTarget.style.left = d.left + 'px';
d.eTarget.style.top=d.top + 'px';
}
function doDown(e){
drag(e);
applyDrag();
return false;


}
function doMove(e){
drag(e);
applyDrag();
return false;
}
function doUp(e){
drag(e);
applyDrag();
document.removeEventListener('mousedown',doDown);
document.removeEventListener('mousemove',doMove);
document.removeEventListener('mouseup',doUp);
}

var $a = document.getElementById('draggable');
$a.addEventListener('mousedown',draggable);


</script>
</body>
</html>
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 01:50:43
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/1906/
本文WWW.DOC100.NET DOC100.NET版权所有。