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 使用了大量的回调函数, ...
随机推荐
- GoDaddy虚拟主机创建FTP 图文流程
有了ftp各种操作就方便多了,也不用通过网页的控制面板来修改代码了 狗爹linux虚拟主机创建FTP 1. 通过虚拟主机管理界面,进入cPanel控制面板 2. 进入FTP管理页面 3. 填写账号.密 ...
- 美国L1签证申请的常见问题解析
美国L1是一种允许在美国和中国都有机构的跨国公司从国外的母公司派遣一定层次的经理或专业技术人员去美国分支机构工作的非移民签证.L1签证分两类:美国L1A是跨国公司经理及主管人员签证,L1B是专门技术人 ...
- cms-后台eazyui搭建
1.引入eazyUi需要的js 2.布局:上.下.左.中 <%@ page language="java" contentType="text/html; char ...
- cms-详细页面-1
cms-详细信息页面设计思路:点击主页面然后查询详细信信,把查询出来的数据放大modelandvie里面,然后返回前台,然后在跳转页面取出来显示:代码:mapper: <?xml version ...
- IOS给图片增加水印(图片、文字)
在网上发现很多人使用 CGContextDrawImage(context,CGRectMake(0,0,self.width,self.height),[image CGImage]); //原图 ...
- iptables (2) 基本配置
iptables 基本命令使用举例 一.链的基本操作 1.清除所有的规则.1)清除预设表filter中所有规则链中的规则.# iptables -F -F, --flush [chain] Flush ...
- Problem A: C语言习题 链表建立，插入，删除，输出
#include<stdio.h> #include<string.h> #include<stdlib.h> typedef struct student { l ...
- 2018.6.6 基于Oracle数据库的航天信息系统JDBC练习
综合练习 一.语言和环境 A.实现语言 Java B.环境要求 JDK 6.0及其以上版本.MyEclipse7.5及其以上版本.Oracle11g.PL/SQL Developer 二.功能要求 开 ...
- 深入理解计算机系统_3e 第十章家庭作业 CS:APP3e chapter 10 homework
10.6 1.若成功打开"foo.txt": -->1.1若成功打开"baz.txt": 输出"4\n" -->1.2若未能成功 ...
- 生成.m文件的python代码中出现的错误
错误代码 import tempfile import subprocess import shlex import os import numpy as np import scipy.io scr ...