27、 jq 拖拽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: darkgoldenrod;
position: absolute;
}
</style>
</head>
<body>
<div id="box">
</div>
<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
<script type="text/javascript">
//工具方法
//$.extend({})
$.extend({
aaa : function(){
return 'aaa';
},
bbb : function(){
return 'bbb';
},
ccc : function(){
return 'ccc';
},
//1. 去除字符串中左边的空格（封装成 工具方法）
trimLeft : function(str){
return str.replace(/^\s+/g,'');
},
//2. 去除字符串中右边的空格（封装成 工具方法）
trimRight : function(str){
return str.replace(/\s+$/g,'');
}
});
// alert($.aaa());
// alert($.bbb());
// alert($.ccc());
//对象方法
//$.fn.extend({})
$.fn.extend({
aaa : function(){
return 'aaa';
},
bbb : function(){
return 'bbb';
},
ccc : function(){
return 'ccc';
},
//1. 去除字符串中左边的空格（封装成 对象方法）
trimLeft : function(str){
return str.replace(/^\s+/g,'');
},
//2. 去除字符串中右边的空格（封装成 对象方法）
trimRight : function(str){
return str.replace(/\s+$/g,'');
},
//3. 封装拖拽的方法（封装成 对象方法）
drag : function(){
var disX = null;
var disY = null;
var that = this; //jQ对象
this.mousedown(function(evt){
// alert(this); //原生this对象：代表当前所触发事件的对象
disX = evt.pageX - $(this).offset().left;
disY = evt.pageY - $(this).offset().top;
//文档添加移动事件
$(document).mousemove(function(evt){
that.css({left : evt.pageX - disX,top : evt.pageY - disY});
})
//鼠标抬起事件
$(document).mouseup(function(){
$(this).off();
})
})
}
})
// alert($().aaa());
// alert($().bbb());
// alert($().ccc());
//1. 去除字符串中左边的空格（封装成 工具方法和对象方法）
// alert('(' + $.trimLeft(' a b ') + ')');
// alert('(' + $().trimLeft(' a b ') + ')');
// alert('(' + $.trimRight(' a b ') + ')');
// alert('(' + $().trimRight(' a b ') + ')');
//2. 去除字符串中右边的空格（封装成 工具方法和对象方法）
//3. 封装拖拽的方法（封装成 对象方法）
//事件中的this ： 表示原生对象（当前对象）
//jQuery对象调用的方法中，this ： 表示jQuery对象
$('#box').drag();
</script>
</body>
</html>
27、 jq 拖拽的更多相关文章
- jq 拖拽
1.尼玛, move事件的时候忘了加ev,找了一个多小时 <!DOCTYPE html> <html> <head lang="en"> < ...
- jq拖拽插件
(function ($) { var move = false; //标记控件是否处于被拖动状态 var dragOffsetX = 0; //控件左边界和鼠标X轴的差 var dragOffset ...
- Jquery拖拽，拖动排序插件
上github搜jquery-sortable <!-- jq拖拽排序 --> <script src="${contextPath}/static/excelTable/ ...
- jQ插件--时间线插件和拖拽API
这个时间轴是工作上用到的,自己写了一个, qq空间有时间轴的控件, 百度文库也有时间轴的控件: 百度的时间轴大概是这样的: 用户点击对应的锚链接, 那个三角会滚动, 然后左侧的界面也会滚动: 实际的 ...
- JQ实现3D拖拽效果
<!DOCTYPE HTML> <html onselectstart='return false'> <head> <meta http-equiv=&qu ...
- 基于 jq 实现拖拽上传 APK 文件，js解析 APK 信息
技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档 参考:前端解析ipa.apk安装包信息 - ...
- jq实现拖拽
$("body").delegate( ".msg-layer",{ mousedown: function (e) { var el = $(".m ...
- Jquery 多行拖拽图片排序 jq优化
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 不断优化，重构我的代码-----拖拽jquery插件
最近学东西学的有点太散了,歇一阵子,重新完善之前的JQ插件,今天先上拖拽吧 // JavaScript Document (function($){ var defaults = { actionEl ...
随机推荐
- web安全测试---AppScan扫描工具
安全测试应该是测试中非常重要的一部分,但他常常最容易被忽视掉. 尽管国内经常出现各种安全事件,但没有真正的引起人们的注意.不管是开发还是测试都不太关注产品的安全.当然,这也不能怪我们苦B的“民工兄 弟 ...
- Visual Studio进行Web性能测试- Part II
Visual Studio进行Web性能测试- Part II 2012-08-31 14:34 by 知平软件, 7557 阅读, 5 评论, 收藏, 编辑 原文作者:Ambily.raj 对于一个 ...
- 中期linux课程考试题
[口头表达] 1)请描述你了解的磁盘分区的相关知识2)什么是rsync,你有什么生产环境的应用?3)在生产环境中,公司的IDC机房即将超过254台机器,请问你有什么解决方案来规划扩展IDC机房的内网网 ...
- asp.net中WebResponse 跨域访问示例
前两天,一个朋友让我帮他写这样一个程序:在asp.net里面访问asp的页面,把数据提交对方的数据库后,根据返回的值(返回值为:OK或ERROR),如果为OK再把填入本地数据库.当时,想当然,觉得很简 ...
- 关于asyncio知识（四）
一.使用 asyncio 总结 最近在公司的一些项目中开始慢慢使用python 的asyncio, 使用的过程中也是各种踩坑,遇到的问题也不少,其中有一次是内存的问题,自己也整理了遇到的问题以及解决方 ...
- Atitit 最近资料文章列表r9 r8 月份 attilax总结
Atitit 最近资料文章列表r9 r8 月份 attilax总结 atitit tag标签标示规范 attilax总结 v2 r922.docx 2017-09-28 02:04 阅读(27) ...
- 深入理解JDBC的超时设置
恰当的JDBC超时设置能够有效地减少服务失效的时间.本文将对数据库的各种超时设置及其设置方法做介绍. 真实案例:应用服务器在遭到DDos攻击后无法响应 在遭到DDos攻击后,整个服务都垮掉了.由于第四 ...
- 【转载 Hadoop&Spark 动手实践 2】Hadoop2.7.3 HDFS理论与动手实践
简介 HDFS(Hadoop Distributed File System )Hadoop分布式文件系统.是根据google发表的论文翻版的.论文为GFS(Google File System)Go ...
- 【转载】vi/vim使用进阶: 指随意动，移动如飞 (二)
本节所用命令的帮助入口: :help usr_03.txt :help motion.txt :help usr_29.txt :help scroll.txt :help folding 上一篇文章 ...
- 具体解释MVP矩阵之ViewMatrix
矩阵推导 ViewMatrix用于直接将World坐标系下的坐标转换到Camera坐标系下.已知相机的坐标系.还有相机在世界空间下的坐标.就能够求出ViewMatrix.以下进行具体推导. 令UVN为 ...