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 使用了大量的回调函数, ...
随机推荐
- ${fn：} 函数
调用这样一个头文件<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions " ...
- Android接入支付宝支付实现
接上篇android接入微信支付文章,这篇我们带你来接入支付宝支付服务 简介 首先要说明的是个人感觉接入支付宝比微信简单多了,很轻松的,所以同学们不要紧张~ 当然还是老规矩啦,上来肯定的贴上官网地址, ...
- Java Web中web.xml文件简单介绍
参考博客: https://www.cnblogs.com/Y-oung/p/8401549.html 1.XML 声明和根元素 <?xml version="1.0" en ...
- uLua学习之读取外部Lua脚本（四）
前言 上节说到了Lua脚本与unity3d中C#脚本的数据交互,但是我感觉上节中的数理方式不太好,因为我们是把Lua脚本以字符串形式粘贴到C#脚本中的,如果读取配置数据都这样做的话,那就太可怕了.想想 ...
- C语言的一小步—————— 一些小项目及解析
——-------- 仅以此献给东半球第二优秀的C语言老师,黑锤李某鸽,希望总有那么一天我们的知识可以像他的丰臀一样渊博! bug跟蚊子的相似之处: 1.不知道藏在哪里. 2.不知道有多少. 3.总是 ...
- linux 命令——44 top (转）
top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器.下面详细介绍它的使用方法.top是 一个动态显示过程,即可以通过用户按键来不断刷 ...
- selenium跳过https的问题
背景: 周六产品给我反馈:支付成功页面后会提示这个,问自动化为什么没有发现这样的问题 第一反应:这个地址肯定被举报了,我也肯定没有设置过安全链接,因为都没有见过这样的网址,如果有问题,应该会直接出错, ...
- Linux MySQL 修改密码
修改root本地登录密码 修改root默认的密码(方法一)1. 启动mysql之后systemctl start mysqld.service2. 修改mysql的配置文件 vi /etc/my.cn ...
- SummerVocation_Learning--java的线程同步
public class Test_XCTB implements Runnable{ Timer timer = new Timer(); public static void main(Strin ...
- js获取整型数组最大值、最小值、平均值
---恢复内容开始--- let values = [];//数组(整型数字) //获取数组最大值function arrMaxNum(arr){ var maxNum = null; for (va ...