当前位置:  编程技术>WEB前端

jQuery拖拽div实现思路

    来源: 互联网  发布时间:2014-08-25

    本文导语:  思路是利用jquery的mousemove,mousedown,mouseup三个事件,定义两个相对位置,分别是 1、组件左上角与屏幕左上角的相对位置 2、鼠标所在坐标与组件左上角的相对位置。 具体函数如下: 代码如下: .drag{ position:absolute; background:#000...

思路是利用jquery的mousemove,mousedown,mouseup三个事件,定义两个相对位置,分别是

1、组件左上角与屏幕左上角的相对位置

2、鼠标所在坐标与组件左上角的相对位置。

具体函数如下:

代码如下:

.drag{
position:absolute;
background:#0000CC;
top:100px;left:200px;
padding:0;
}

代码如下:

$(document).ready(function(){
var move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
$(".drag").mousedown(function(e){
move=true;
_x=e.pageX-parseInt($(".drag").css("left"));
_y=e.pageY-parseInt($(".drag").css("top"));
});
$(document).mousemove(function(e){
if(move){
var x=e.pageX-_x;//控件左上角到屏幕左上角的相对位置
var y=e.pageY-_y;
$(".drag").css({"top":y,"left":x});
}
}).mouseup(function(){
move=false;
});

其中e.pageX,e.pageY为当前鼠标的横纵坐标。

大家自己动手试一下,思路就更加清晰了~

    
 
 

您可能感兴趣的文章:

  • jquery easyui表单重置扩展思路
  • jQuery响应enter键的实现思路
  • 使用jquery修改表单的提交地址基本思路
  • jquery 页眉单行信息滚动显示实现思路及代码
  • jquery批量删除的实现思路与代码
  • jquery 倒计时效果实现秒杀的思路与代码
  • jQuery+ajax实现鼠标单击修改内容的思路
  • jQuery移除元素自动解绑事件实现思路及代码
  • jQuery动态改变图片显示大小(修改版)的实现思路及代码
  • Jquery图片放大镜效果的实现思路与代码
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • JQuery实现元素屏幕居中显示的代码
  • jquery 回车登录的实现方法
  • 基于jQuery实现的MVC开发框架 CorMVC
  • 简单的代码实现jquery定时器
  • jQuery Trim去除字符串首尾空字符的实现方法说明
  • jquery插件开发之实现jquery手风琴功能分享
  • jQuery实现回车键(Enter)切换文本框焦点的代码实例
  • jquery实现的导航固定效果
  • jquery实现点击消失的代码
  • 编程语言 iis7站长之家
  • jQuery 表格隔行换色 鼠标高亮行变色的实现代码
  • jquery特效 table鼠标滑过变色的实现代码
  • Jquery点击高亮显示的实现代码
  • jquery实现图片路径不存在时进行替换的代码
  • jquery 选择块与改变属性值的实现方法
  • 60秒倒计时的jquery实现代码
  • jquery半透明设置实现代码
  • jquery 实现文本框焦点自动跳转
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery拖动div、移动div与弹出层实例
  • Jquery在指定DIV加载HTML示例代码
  • jquery 页面滚动到指定DIV的代码
  • 巧用jquery解决下拉菜单被Div遮挡的相关问题
  • jQuery使任意div随意隐藏的代码举例
  • 通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
  • jquery实现div层的隐藏或显示
  • jquery让返回的内容显示在特定div里(代码少而精悍)
  • jquery显示与隐藏div的方法示例
  • jquery实现弹出div,始终显示在屏幕正中间的简单实例
  • jQuery EasyDrag实现DIV拖动
  • jquery显示、隐藏div的方法举例
  • jquery 实现input输入什么div图层显示什么
  • Jquery判断div是否为空以实现显示或隐藏的代码
  • jquery怎么获取div的id值?
  • jQuery拖动div、移动div、弹出层实现原理及示例
  • jquery设置div半透明背景色与文字不透明
  • jQuery判断div随滚动条滚动到一定位置后停止
  • Jquery全屏遮罩层DIV的实现代码
  • Jquery实现Div上下移动示例
  • jQuery概述,代码举例及最新版下载
  • jQuery鼠标动画插件 jquery-ahover
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery向导插件 Jquery Wizard Plugin
  • jQuery圆角插件 jQuery Corners
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin
  • jQuery日历插件 jQuery Week Calendar
  • jQuery的中文日历插件 jQuery.datePickerCn


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3