用js实现拖拽功能

平常我们在网上可以看到,按住一张图片,然后拖到另一处去,前天在网上看石川(Blue)老师 的js课堂,有见过这个,写下来与大家分享一下:

1,先画个div小红块,样式设置如下:

#div1{width: 200px; height: 200px; background-color: red; position:absolute;}

这里的positon属性很重要,如果没有这个,根本拖不动你可以试一下。

2,然后需要用到三个事件,onmousedown, onmousemove, onmouseup

onmousedown,鼠标按下时,需要取得鼠标的坐标:


用js实现拖拽功能

disX = evnt.clientX - oTxt.offsetLeft;
disY = evnt.clientY - oTxt.offsetTop;

鼠标坐标-红块左上角坐标,取得距离;

2,onmousemove,当鼠标移动时,鼠标坐标变化,红块进行重画,重画的坐标与原来保持一致:

var x = evnt.clientX - disX;
var y = evnt.clientY - disY;

oTxt.style.left = x  + "px";
oTxt.style.top = y  + "px";

3,onmouseup,当鼠标放开时,红块停止,这时候需要做的时把前两个事件为空:

document.onmousemove = null;
document.onmouseup = null;

4,当然以上还远远不够,当你拖动的过快时候,红块会脱离窗口,你可以尝试删除试一下,代码如下:

if( x<0 ){
    x = 0;
}  else if (x>document.documentElement.clientWidth-oTxt.offsetWidth){
    x = document.documentElement.clientWidth-oTxt.offsetWidth;
} 
if (y > document.documentElement.clientHeight-oTxt.offsetHeight){
    y = document.documentElement.clientHeight-oTxt.offsetHeight;
}else if( y<0 ) {
    y = 0;
}

自己理解吧:

全部代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拖拽</title>
<style type="text/css">
#div1{width: 200px; height: 200px; background-color: red; position:absolute;}
</style>
<script type="text/javascript" charset="utf-8">
window.onload = function() {
var disX = 0;
var disY = 0;
var oTxt = document.getElementById("div1");
oTxt.onmousedown = function (ev) {
var evnt = ev || event;
disX = evnt.clientX - oTxt.offsetLeft;
disY = evnt.clientY - oTxt.offsetTop;
document.onmousemove = function(ev) {
var evnt = ev || event;
var x = evnt.clientX - disX;
var y = evnt.clientY - disY;
if( x<0 ){
x = 0;
}  else if (x>document.documentElement.clientWidth-oTxt.offsetWidth){
x = document.documentElement.clientWidth-oTxt.offsetWidth;
} 
if (y > document.documentElement.clientHeight-oTxt.offsetHeight){
y = document.documentElement.clientHeight-oTxt.offsetHeight;
}else if( y<0 ) {
y = 0;
} 
oTxt.style.left = x  + "px";
oTxt.style.top = y  + "px";
}
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
}
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>



用js实现拖拽功能,布布扣,bubuko.com

用js实现拖拽功能

上一篇:x32dbg/x64dbg最有价值的100个插件


下一篇:JDBC1:Statement和PreparedStatement