jQuery控制Div拖拽效果完整实例分析
本文实例讲述了jQuery控制Div拖拽效果的方法。分享给大家供大家参考。具体如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#Drigging {
width:200px;
background:#CCC;
border:solid 1px #666;
height:80px;
line-height:80px;
text-align:center;
position:absolute;
}
</style>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var bool=false; //标识是否移动元素
var offsetX=0; //声明DIV在当前窗口的Left值
var offsetY=0; //声明DIV在当前窗口的Top值
$("#Drigging").mouseover(function(){
$(this).css('cursor','move');
//当鼠标移动到拖拽的DIV上的时候，将鼠标的样式设置为移动(move)
})
$("#Drigging").mousedown(function(){
bool=true;
//当鼠标在移动元素按下的时候将bool设定为true
offsetX = event.offsetX;
//获取鼠标在当前窗口的相对偏移位置的Left值并赋值给offsetX
offsetY = event.offsetY;
//获取鼠在当前窗口的相对偏移位置的Top值并赋值给offsetY
$(this).css('cursor','move');
}).mouseup(function(){
bool=false;
//当鼠标在移动元素起来的时候将bool设定为false
})
$(document).mousemove(function(){
if(!bool)//如果bool为false则返回
return;
//当bool为true的时候执行下面的代码
var x = event.clientX-offsetX;
//event.clientX得到鼠标相对于客户端正文区域的偏移
//然后减去offsetX即得到当前推拽元素相对于当前窗口的X值
//（减去鼠标刚开始拖动的时候在当前窗口的偏移X）
var y = event.clientY-offsetY;
//event.clientY得到鼠标相对于客户端正文区域的偏移
//然后减去offsetX即得到当前推拽元素相对于当前窗口的Y值
//（减去鼠标刚开始拖动的时候在当前窗口的偏移Y）
$("#Drigging").css("left", x);
$("#Drigging").css("top", y);
$("#Drigging").css('cursor','move');
})
})
</script>
</head>
<body>
<div id="Drigging" style="float:left">
拖拽层
</div>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。
-
本文向大家介绍jquery实现拖拽调整Div大小，包括了jquery实现拖拽调整Div大小的使用技巧和注意事项，需要的朋友参考一下 今天写了一天这个jquery插件： 可以实现对div进行拖拽来调整大小的功能。 记录一下今天的劳动成果，可能会有很多不成熟的地方，欢迎大家来指正，谢谢！ 以上就是本文的全部内容了，希望大家能够喜欢。
-
本文向大家介绍完美的js div拖拽实例代码，包括了完美的js div拖拽实例代码的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了完美的js div拖拽实例代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
拖拽效果，和调整窗口大小其实差不多，首先我们来看一张图。 黑色的小圆点，是我们鼠标单击的点。 红线的距离，可以通过e.pageX获得。 蓝线的距离，可以通过可以移动的这个Div盒子的 offsetLeft拿到。 此时我们就可以拿到，黄线的长度，当鼠标，也就是小圆点往右移动的时候，黄线是不会变的，而红线会变长，我们再次通过e.pageX拿到这个红线的长，我们通过红线的长度，减去不变的黄线的长度，得到
-
本文向大家介绍JS弹出可拖拽可关闭的div层完整实例，包括了JS弹出可拖拽可关闭的div层完整实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS弹出可拖拽可关闭的div层完整实现方法。分享给大家供大家参考。具体实现方法如下： 希望本文所述对大家的javascript程序设计有所帮助。
-
本文向大家介绍Vue.Draggable实现拖拽效果，包括了Vue.Draggable实现拖拽效果的使用技巧和注意事项，需要的朋友参考一下 快速实现Vue.Draggable的拖拽效果，供大家参考，具体内容如下 1.下载包：npm install vuedraggable 配置：package.json 2.在你的组件中引进依赖： 3.注册：draggable这个组件 4.使用html模板中使用该
-
本文向大家介绍vue实现拖拽效果，包括了vue实现拖拽效果的使用技巧和注意事项，需要的朋友参考一下 vue中实现拖拽效果，供大家参考，具体内容如下 首先要搞明白分清clientY pageY screenY layerY offsetY的区别 作用3（事件对象中记录的鼠标位置） 语法 解释 evt.screenX 相对于屏幕的左上角为原点 evt.screenY evt.clientX 相对于浏览