div拖动实现及优化
$(".aside").mousedown(function(e){
$(this).find("li").css("cursor","move");
$(this).find("div").css("cursor","move");
ready2Move = true;
startValue = e.clientY -$(this).offset().top;
return false;
}).mouseup(function(e){
$(this).find("li").css("cursor","pointer");
$(this).find("div").css("cursor","pointer");
ready2Move = false;
startValue = e.clientY -$(this).offset().top;
}).mouseout(function(e){ //这里是为了防止鼠标脱出后仍然控制div移动的情况
$(this).find("li").css("cursor","pointer");
$(this).find("div").css("cursor","pointer");
ready2Move = false;
startValue = e.clientY -$(this).offset().top;
}).mousemove(function (e) {
if(ready2Move){//鼠标按下,并移动
var currentValue = e.clientY;
var distance = currentValue - startValue;
$(".aside").css("top",distance+"px");
}
return false;
});
$(".aside").mousedown(function(e){
$(this).find("li").css("cursor","move");
$(this).find("div").css("cursor","move");
ready2Move = true;
startValue = e.clientY -$(this).offset().top;
return false;
})
$(document).mouseup(function(e){
$(".aside").find("li").css("cursor","pointer");
$(".aside").find("div").css("cursor","pointer");
ready2Move = false;
startValue = e.clientY -$(".aside").offset().top;
}).mousemove(function (e) {
if(ready2Move){//鼠标按下,并移动
var currentValue = e.clientY;
var distance = currentValue - startValue;
$(".aside").css("top",distance+"px");
}
return false;
});
div拖动实现及优化的更多相关文章
- js实现一个可以兼容PC端和移动端的div拖动效果
前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouse ...
- jquery div拖动效果示例代码
div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过 复制代码代码如下: <%@ page language=" ...
- 让一个div拖动和让一个panel拖动加拉大拉小
一.让一个div拖动 <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea ...
- jquery实现很简单的DIV拖动
今天用jquery实现了一个很简单的拖动...实现思路很简单 如下: 在thickbox 弹出层内实现拖拽DIV,那么得进行一下相对宽高的运算:必须加上相对于可见窗口宽高和弹出层宽高之间的差: ...
- 实现DIV拖动
Ajax的到来让B/S中的客户端中开发有火了一把,网上出现了很多优秀的开源框架和UI,比较著名了有prototype,YUI,GWT等,但很多时候发现这些东西很难用到你的系统之中,有时候你的系统仅仅需 ...
- jQuery实现DIV拖动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 探讨把一个元素从它所在的div 拖动到另一个div内的实现方法
故事背景: 接到一个新需求,要求用vue搞,主要是拖动实现布局,关键点有:单个组件拖动,一行多列里面的组件拖动, 单个组件可以拖入一行多列里, 单个组件的拖动好实现,关键是把一个组件拖动到另一个类似 ...
- 手机版 div拖动
<!doctype html> <html> <head> <title></title> <script type="te ...
- 自定义div 拖动。键盘上下左右键移动,ctrl+Q控制是否可以移动,ctrl+回车,返回初始状态
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...
随机推荐
- DjVu转PDF
作者:马健邮箱:stronghorse_mj@hotmail.com发布:2009.09.22更新:2012.06.11针对PdfToy的新进展,更新了相关内容. 1 引言2 理论3 实现 3. ...
- VMWare虚拟机无法打开内核设备"\\.\Global\vmx86"的解决方法
cmd执行: 1.net start vmci 2.net start vmx86 3.net start VMnetuserif
- 从底层了解ASP.NET体系结构
导读: 前言 关于ASP.NET的底层的工作机制,最近园子里讨论的甚是火热.相信很多人都看过Rick Strahl先生的一篇经典之作:A low-level Look at the ASP.NET ...
- @RestControllerAdvice注解使用
在spring 3.2中,新增了@ControllerAdvice,@RestControllerAdvice 注解,可以用于定义@ExceptionHandler.@InitBinder.@Mode ...
- vue使用过程常见的一些问题
Vue目前的的开发模式主要有两种:1.直接页面级的开发,script直接引入Vue2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了 webpack ...
- dede地图显示最新文章的解决方法
以DEDECMS5.6为例:sitemap.htm 在/templets/plus/目录里,就算添加了织梦相关标签调用,但却不能显示文章. 这是因为makehtml_map.php不能解析织梦的相关调 ...
- jmeter-Http信息头管理器
今天遇到的问题是:一个报名接口,用户先要登录后,再去报名.而登录页面:用户名.密码.动态图形验证码,所以不能直接使用jmeter参数传值方法. 测试的时候,需要先登录,获取ticket后,才能去请求下 ...
- UncategorizedSQLException Mybatis中jdbcType的作用
使用MyBatis框架做更新操作时,在该字段需要更新的内容为空时,就会出现1111错误,也就是无效的列类型,这个时候你就要使用jdbcType.至于什么时候要使用到javaType我还没遇到过,而且我 ...
- Codeforces Round #534 (Div. 2) D. Game with modulo 交互题
先二分一个区间,再在区间里面二分即可: 可以仔细想想,想明白很有意思的: #include<iostream> #include<cstdio> #include<alg ...
- 7.Palindrome Linked List(回文链表)
Level: Easy 题目描述: Given a singly linked list, determine if it is a palindrome. Example 1: Input: ...