菜单

Jquery写八个鼠标拖动作效果果落到实处原理与代码

2019年8月3日 - JavaScript

多年来项目中要做一个鼠标拖拽层的成效,于是手动使用Jquery做了三个,发出来跟我们分享一下,并希望能赢得高手的辅导,要是哪位英豪以为自家的笔触和代码不科学恐怕须要改正的话,希望能指导一二,在下多谢不尽。

自家的思绪是那般的

1、在鼠标按下的时候,捕获鼠标的脚下岗位;

2、获得要运动目标的方今岗位信息;

3、鼠标移动时,计算鼠标移动的相距,将以此距离更新到目的的地点,在自个儿的代码中,作者试用相对定位来代表对象的职分;

4、当鼠标移出对象也许鼠标弹起的时候,则感觉对象处于不能够移动的景况。这些在自个儿的代码中选择一个bool类型的变量isMouseDown表示,当以此变量为true的时候,则表明对象处于可活动情状,倘使为false的时候,表示对象处于不可移动景况。鼠标移出对象恐怕弹出的时候,就将isMouseDown置为false。

好了,思路就是那般,上面将代码贴出来,若是自个儿的思路中表明的不驾驭的话,能够在代码中看出来:

复制代码 代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head>
<title>使用鼠标拖动层代码</title>
<style type=”text/css”>
#Main
{
width:400px;
height:400px;
position:absolute;
top:10px;
left:0;
border:1px solid #CCC;
border-radius:5px;
background-color:Green;
}
h3
{
margin:0;
width:400px;
height:40px;
background-color:Gray;
cursor:move;
line-height:40px;
border-radius:5px 5px 0 0;
}
</style>
<script type=”text/javascript”
src=”http://code.jquery.com/jquery-1.7.min.js"&gt;&lt;/script&gt;
<script type=”text/javascript”>
//注册三个Jquery的鼠标拖动函数,参数为要拖动的指标
$.fn.extend({ SliderObject: function (objMoved) {
var isMouseDown = false; //鼠标是或不是按下
var mouseDownPosiX;
var mouseDownPosiY;
var InitPositionX;
var InitPositionY;
var obj = $(objMoved) == undefined ? $(this) : $(objMoved);
obj.mousedown(function (e) {
//当鼠标按下时捕获鼠标地方以及对象的当下地点
mouseDownPosiX = e.pageX;
mouseDownPosiY = e.pageY;
isMouseDown = true;

InitPositionX = obj.css(“left”).replace(“px”, “”);
InitPositionY = obj.css(“top”).replace(“px”, “”);

}).mousemove(function (e) {
//当鼠标按下同临时候一抬手一动脚时,首先推断鼠标是还是不是在当下主旨,以及鼠标是或不是早就弹起,
if ($(this).is(“:focus”) && isMouseDown) {
var tempX = parseInt(e.pageX) – parseInt(mouseDownPosiX) +
parseInt(InitPositionX);
var tempY = parseInt(e.pageY) – parseInt(mouseDownPosiY) +
parseInt(InitPositionY);
obj.css(“left”, tempX + “px”).css(“top”, tempY + “px”);
}
//当鼠标弹起或许离开元素时,将鼠标弹起置为false,不运动目的
}).mouseup(function () {
isMouseDown = false;
}).mouseleave(function () {
isMouseDown = false;
});
}
});
$(document).ready(function () {
$(“#Slider”).SliderObject($(“#Main”));
})
</script>
</head>
<body>
<div id=”Main”>
<h3>鼠标放在这里拖动小编</h3>
<div id=”Container”>能够行使鼠标拖动的层</div>
</div>
</body>
</html>

你只怕感兴趣的稿子:

相关文章

发表评论

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

网站地图xml地图