拖拽窗口的实现-JQuery实现;
主要是距离的掌握
如图,原始位置和当前位置。
对于当前位置:想要求得left值b',需要b'=a'-c;
其中,a’= ev.pageX;就是指针当前距离文档左边的距离;
同时,可以发现c在拖拽过程中是不会变的。因此求c,可以用初始位置来求;
对于初始位置:
c = a-b;
其中,a=ev.pageX;
b= $(this).offset().left; //offset获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性:top 和
left,以像素计。此方法只对可见元素有效;
总结:
首先对div1添加mousedown事件,
mousedown事件中再添加mousemove事件,
mousemove事件中更新left,top值;
添加mouseup事件,用$(document).off()来解除事件;
完整代码:
$(function(){ var disX = 0;
var disY = 0; $('div').mousedown(function(ev){ disX = ev.pageX - $(this).offset().left;//求出鼠标距离拖拽的div左边框的距离;
disY = ev.pageY - $(this).offset().top;
//offset获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性:top 和
//left,以像素计。此方法只对可见元素有效。
//pageX鼠标相对于文档的左边缘的位置。 $(document).mousemove(function(ev){ $('div').css('left',ev.pageX - disX);
$('div').css('top',ev.pageY - disY); }); $(document).mouseup(function(){ $(document).off(); }); return false; }); });
拖拽—JQuery
拖拽窗口的实现-JQuery实现;的更多相关文章
- WPF禁止拖拽窗口到边缘自动最大化
近期有个需求,可以通过拖拽改变窗口大小,但是不允许窗口最大化.最小化.拖到边缘的时候也不能自动最大化. 要想禁止拖拽窗口到边缘自动最大化,只要改注册表即可,但是系统所有应用都会被禁止. 1.运行reg ...
- ztree插件的使用及列表项拖拽的实现(jQuery)+异步加载节点数据
为了实现如图所示的树状结构图,并使列表项可拖动到盒子里,研究了ztree这个插件的使用,并仔细研究了列表项的拖动事件.完成了预期需求,对jQuery的运用得到了提高.这个插件的功能非常强大,除了基本的 ...
- javascript--鼠标拖拽窗口案例(鼠标按下,在鼠标移动过程中,盒子跟着一起移动,鼠标松开,盒子停止移动)
界面如图所示: 要求:在“信息注册”栏,按下鼠标,然后鼠标在页面移动,在鼠标移动过程中,该窗口跟着鼠标移动,当鼠标松开的时候,窗口停止移动.点击“关闭”,该窗口隐藏. 实现思路: 1.页面结构分析:一 ...
- 针对后台列表table拖拽比较实用的jquery拖动排序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu ...
- 解决direct2d拖拽窗口闪烁
响应WM_ERASEBKGND,在OnEraseBkgnd()处返回FALSE,阻止GDI重绘客户区背景色,设置背景色的工作交给Direct2D在Render时设置,否则在Resize时会出现窗口闪烁 ...
- JAVA GUI学习 - JInternalFrame浮动窗口:可拖拽窗口(依赖于父窗口)
public class JInternalFrameKnow extends JInternalFrame { public JInternalFrameKnow() { this.setBound ...
- jQuery的DOM操作实例(2)——拖拽效果&&拓展插件
一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件
- nw.js FrameLess Window下的窗口拖拽与窗口大小控制
nw.js FrameLess Window下的窗口拖拽与窗口大小控制 很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将fr ...
- QT笔记之自定义窗口拖拽移动
1.QT自定义标题栏,拖拽标题栏移动窗口(只能拖拽标题,其他位置无法拖拽) 方法一: 转载:http://blog.sina.com.cn/s/blog_4ba5b45e0102e83h.html . ...
随机推荐
- hdu 1159 Common Subsequence 【LCS 基础入门】
链接: http://acm.hdu.edu.cn/showproblem.php?pid=1159 http://acm.hust.edu.cn/vjudge/contest/view.action ...
- php 字母和数字验证码
//验证码 <?php //实现简单的验证码 //session_start session_start(); //画布 $image = imagecreatetruecolor(100, 3 ...
- 全面解析JavaScript中“&&”和“||”操作符(总结篇)
1.||(逻辑或), 从字面上来说,只有前后都是false的时候才返回false,否则返回true. ? 1 2 3 4 alert(true||false); // true alert(false ...
- xml与java对象转换 -- XStreamAlias
@XStreamAlias使用 一. 特点: 简化的API; 无映射文件; 高性能,低内存占用; 整洁的XML; 不需要修改对象;支持内部私有字段,不需要setter/getter方法 提供序列化接口 ...
- python可变参数*args, **kwargs
python可变参数*args, **kwargs def foo(* args, ** kwargs): print ' args = ', args print ' kwargs = ', k ...
- C#中的另类语法
一..net中return的另类写法: 不知道是从3.5还是从4.0开始C#语法中的return有了新的写法示例如下: public string functionDemo() { str ...
- C++ 常见字符处理 收录
1.string字符串删除 字符串中 指定字符 std::string& HTTPRequestHandlerImpl::replace_all_distinct(std::string&am ...
- Oracle_trunc截取函数
转:http://blog.sina.com.cn/s/blog_6b58d2fa0100r6ub.html TRUNC函数用于对值进行截断. 用法有两种:TRUNC(NUMBER)表示截断数字,TR ...
- vue-cli中config目录下的index.js文件详解
vue-cli脚手架工具config目录下的index.js解析 转载自:http://www.cnblogs.com/ye-hcj/p/7077796.html // see http://vuej ...
- 笔记-mysql 导出查询结果
语法: The SELECT ... INTO OUTFILE 'file_name' [options] form of SELECT writes the selected rows to a f ...