Jquery 实现层的拖动，支持回调函数
最近在写一个CMS内容管理系统，前台基本是用ajax异步请求服务器，通过ashx处理,返回json格式处理。由于需要更加人性化的界面，所以采用到了拖动层的操作。
以下是拖动层的主要核心方法，本来想写成插件的，考虑的没那么多时间，就以方法的方式了。
/*
* Jquery 鼠标左键拖动面板
* coder：新生帝
* obj：jQuery选择器名称
* callback：回调函数（拖动停止要执行的函数），可通过$(this)获取 obj 对象
*/
function movePanel(obj,callback){
var _evenObj=null; // 触发事件的对象
var _move=false; // 移动标识
var _x,_y; //鼠标离控件左上角的相对位置 $(obj).bind({
mousedown:function(e){
_evenObj=e.currentTarget; // 当前触发的作用对象
_move=true;
var cx=$(_evenObj).position().left; // 获取父类的X轴偏移量，如果相对屏幕的偏移量，请把position()改为offset();
var cy=$(_evenObj).position().top; // 获取父类的Y轴偏移量 , 同上
_x=e.pageX-cx;
_y=e.pageY-cy;
},
mouseup:function(){
//判断方法是否存在
if (typeof callback != 'undefined' && callback instanceof Function) {
$ext=$.extend({},$(obj)); // 为obj对象扩展回调方法
$ext.addMethod=callback;
$ext.addMethod();
}
}
});
$(document).bind({
mousemove:function(e){
if(e.which==1){ // 判断是否是左键按下
if(_evenObj!=null){ // 判断触发事件的对象是否为空
if(_move){
var x=e.pageX-_x;
var y=e.pageY-_y;
$(_evenObj).css({
top:y,
left:x
});
}
}
}
},
mouseup:function(){
_evenObj=null;
_move=false;
}
});
}
上面就是实现鼠标左键拖动的主要方法，下面是调用：
//别忘了引用Jquery库文件。
// 调用=================================================
$(function () {
movePanel(".move",function(){ //有回调函数
alert("哈哈哈，我是执行完后在显示的，我作用的对象是class为："+$(this).attr("class")+" 的div");
});
movePanel(".move2"); //没有回调函数
});
//=====================================================
这样就可以通过简单的方法调用实现层的拖动，支持回调函数，如果想拓展的话，可以在 $(obj).bind({})中拓展。
以下是拖动层网站的HTML代码。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
/*
* Jquery 鼠标左键拖动面板
* coder：新生帝
* obj：jQuery选择器名称
* callback：回调函数（拖动停止要执行的函数），可通过$(this)获取 obj 对象
*/
function movePanel(obj,callback){
var _evenObj=null; // 触发事件的对象
var _move=false; // 移动标识
var _x,_y; //鼠标离控件左上角的相对位置 $(obj).bind({
mousedown:function(e){
_evenObj=e.currentTarget; // 当前触发的作用对象
_move=true;
var cx=$(_evenObj).position().left; // 获取父类的X轴偏移量，如果相对屏幕的偏移量，请把position()改为offset();
var cy=$(_evenObj).position().top; // 获取父类的Y轴偏移量 , 同上
_x=e.pageX-cx;
_y=e.pageY-cy;
},
mouseup:function(){
//判断方法是否存在
if (typeof callback != 'undefined' && callback instanceof Function) {
$ext=$.extend({},$(obj)); // 为obj对象扩展回调方法
$ext.addMethod=callback;
$ext.addMethod();
}
}
});
$(document).bind({
mousemove:function(e){
if(e.which==1){ // 判断是否是左键按下
if(_evenObj!=null){ // 判断触发事件的对象是否为空
if(_move){
var x=e.pageX-_x;
var y=e.pageY-_y;
$(_evenObj).css({
top:y,
left:x
});
}
}
}
},
mouseup:function(){
_evenObj=null;
_move=false;
}
});
} // 调用=================================================
$(function () {
movePanel(".move",function(){ //有回调函数
alert("哈哈哈，我是执行完后在显示的，我作用的对象是class为："+$(this).attr("class")+" 的div");
});
movePanel(".move2"); //没有回调函数
});
//=====================================================
</script>
<style type="text/css">
*{margin:0;padding:0;}
.move{width:500px; height:300px; position:absolute; left:0; top:0; border:1px solid #ccc; background:#e5e5e5;cursor: move; /* */}
.move2{width:200px; height:300px; position:absolute; right:0; top:0; border:1px solid #ccc; background:#e5e5e5;cursor: move;}
</style>
</head>
<body>
<div class="move">
</div>
<div class="move2">
</div>
</body>
</html>
如果哪里写的不好，欢迎指出。
Jquery 实现层的拖动，支持回调函数的更多相关文章
- jQuery中ajax方法无法执行回调函数问题
最近遇到一个问题,发现使用jquery的ajax方法时,回调方法无法执行,而使用$.load()方法时却能正确返回数据.经过长时间调试最终发现是自己粗心大意,原来后台返回的是json数据,而返回的数据 ...
- jQuery使用（）：Callbacks回调函数列表之异步编程(含源码分析)
Callbacks的基本功能回调函数缓存与调用 特定需求模式的Callbacks Callbacks的模拟源码 一.Callbacks的基本功能回调函数缓存与调用 Callbacks即回调函数集合,在 ...
- jQuery基础的动画里面的回调函数
<style> *{margin:0; padding:0;} #target{ border-radius:10px; background:#eee; } .fade{/*动画起始状态 ...
- 小兔JS教程（三）-- 彻底攻略JS回调函数
这一讲来谈谈回调函数. 其实一句话就能概括这个东西: 回调函数就是把一个函数当做参数,传入另一个函数中.传进去的目的仅仅是为了在某个时刻去执行它. 如果不执行,那么你传一个函数进去干嘛呢? 就比如说对 ...
- js中replace的回调函数使用。
这只是一个小问题,但是之前并没有发现.这个问题就是replace的第二个函数是支持回调函数的. var ext = new RegExp('f','g'); 1.str.replace(ext ,1) ...
- node基础06：回调函数
1.Node异步编程 Node.js 异步编程的直接体现就是回调. 异步编程依托于回调来实现,但不能说使用了回调后程序就异步化了. 回调函数在完成任务后就会被调用,Node 使用了大量的回调函数,No ...
- Node.js 学习（四）Node.js 回调函数
Node.js 异步编程的直接体现就是回调. 异步编程依托于回调来实现,但不能说使用了回调后程序就异步化了. 回调函数在完成任务后就会被调用,Node 使用了大量的回调函数,Node 所有 API 都 ...
- c++回调函数
dcc组件支持回调函数接口,当连接/断开连接对端时,调用传入的函数指针. A库和B库想做到不耦合,但是A库需要用到B库的某些函数,A库提供回调函数接口,在初始化的时候指定回调函数,降低耦合程度,每一个 ...
- Node.js 回调函数
Node.js 回调函数 Node.js 异步编程的直接体现就是回调. 异步编程依托于回调来实现,但不能说使用了回调后程序就异步化了. 回调函数在完成任务后就会被调用,Node 使用了大量的回调函数, ...
随机推荐
- 弹框&可用于判断
较常用的弹框:(3种) 1.prompt("显示用户的文本","输入域的默认值"): print();显示打印的对话框: find();显示查找的对话框: (用 ...
- vue使用element-ui实现按需引入
基于Vue的Ui框架 饿了么公司基于vue开的的vue的Ui组件库 Element Ui 基于vue pc端的UI框架 MintUi 基于vue 移动端的ui框架 http://element.ele ...
- echarts使用中的那些事儿（一）
近来由于有几个小项目要用到echarts里的一些图,不得不使用,可是要完全按照自己的意愿来,要对它有些了解,要翻阅资料,遂有以下小结: 1.最开始第一步是把数据调出来就行,能在图上显示就成,以下是最开 ...
- System Center Configuration Manager 2016 必要条件准备篇（Part1）
步骤4.创建系统管理容器 SCCM 2016 配置管理系列(Part 1- 4) 介绍AD01上配置了Active Directory域服务(ADDS),然后将Configuration Manag ...
- sk-learning(2)
sk-learning 学习(2) sklearing 训练评估 针对kdd99数据集使用逻辑回归分类训练 然后进行评估 发觉分数有点高的离谱 取出10%数据494021条,并从中选择四分之一作为测试 ...
- 从暴力匹配到KMP算法
前言 现在有两个字符串:\(s1\)和\(s2\),现在要你输出\(s2\)在\(s1\)当中每一次出现的位置,你会怎么做? 暴力匹配算法 基本思路 用两个指针分别指向当前匹配到的位置,并对当前状态进 ...
- [超详细] Python3爬取豆瓣影评、去停用词、词云图、评论关键词绘图处理
爬取豆瓣电影<大侦探皮卡丘>的影评,并做词云图和关键词绘图第一步:找到评论的网页url.https://movie.douban.com/subject/26835471/comments ...
- click
click简介 Click是一个Python包,用于以可组合的方式创建漂亮的命令行界面,只需要很少的代码.这是“命令行界面创建工具包”.它具有高度可配置性,但具有开箱即用的合理默认值. 点击三点: 任 ...
- edge不能上网-代码 INET_E_RESOURCE_NOT_FOUND
这个问题 ,网上有很多解决方法,我基本都测试了一遍,可是我都没有用 情况:首先,我开始的时候是可以用的,然后在公司,开了代理,就不能使用了,这是我之后多次尝试发现的,所以你也遇到和我一样的情况不必惊慌 ...
- python之enumerate
http://eagletff.blog.163.com/blog/static/116350928201266111125832/一般情况下,如果要对一个列表或者数组既要遍历索引又要遍历元素时,可以 ...