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 ...
随机推荐
- Java50道经典习题-程序26 求星期
题目:请输入星期几的第一个字母来判断一下是星期几,如果第一个字母一样,则继续 判断第二个字母.分析:用情况语句比较好,如果第一个字母一样,则判断用情况语句或if语句判断第二个字母.周一至周日的英文单词 ...
- 输入框获取焦点后placeholder文字消失、修改placeholder的样式
输入框获取焦点后placeholder文字消失: <input placeholder='' onfocus="this.placeholder=''" onblur=&qu ...
- vimrc配置-中文编码和python中的中文注释
set fileencoding=gb18030"设置vim输入的编码 set fileencodings=gb18030,...,"打开文档时vim自动匹配可能的编码方式 在py ...
- 文本PDG转PDF
作者:马健邮箱:stronghorse_mj@hotmail.com发布:2008.08.03更新:2008.08.24 补充说明:此文成文较早,当时文本PDG如果不想用官方浏览器SSREADER看, ...
- js 值传递,引用传递
参考:http://www.cnblogs.com/lcngu/p/5876273.html JS的基本类型,是按值传递的. 对象类型按共享传递的(call by sharing,也叫按对象传递.按对 ...
- Django之视图与模板以及在模板中使用bootstrap
从url中也可以传递参数给后台进行处理.比如http://127.0.0.1:8001/add/?a=4&b=5. 这个链接传入a=4,b=5.后台将进行a+b的处理 新增处理函数 def a ...
- SnackBar使用
注意:build(BuildContext context)在 Scaffold.of(context)之前时,会报错,解决办法:通过build widget来解决,如下代码. import 'pac ...
- new types may not be defined in a return type(c++语言编译错误,处理)
在写程序的时候,定义类时要在大括号后面加上: class Point{ public: Point(int a,int b); Point(const Point &p); int getx( ...
- java中抽象类与接口
1.抽象类是类,它的子类不能再继承其它类了,但可以实现一个和多个接口.接口不是类,它的子接口可以继承多个接口.2.抽象类中是可以有不用abstract修饰的方法,而接口中只能有抽象方法,即方法都要用a ...
- USACO 1.3.6 Ski Course Design[滑雪课程设计]
先说说思路: 这题比上一道坑人的wormholes简单多了!我一看到这题,“XXX设计”,还以为要用到什么dp呢,没想到是水题 用两层循环,第一层循环相差17中的上界,第二层遍历所有的山峰计算答案.并 ...