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 ...
随机推荐
- Asp.Net Core IIS发布后PUT、DELETE请求错误405.0 - Method Not Allowed 因为使用了无效方法(HTTP 谓词)
一.在使用Asp.net WebAPI 或Asp.Net Core WebAPI 时 ,如果使用了Delete请求谓词,本地生产环境正常,线上发布环境报错. 服务器返回405,请求谓词无效. 二.问题 ...
- Chart：Grafana
ylbtech-Chart:Grafana 1.返回顶部 1-1. 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 0. https://grafana.com/ 1. http: ...
- hive sql 里面的注释方式
如果建表ddl 用 comment 这个没问题 那么在sql 语句里面呢,这个貌似不像mysql 那样能用 # // /* */ (左边这些都不行) 其实用 -- comment 就行啦 貌似上面的- ...
- shell编程学习笔记（十二）：Shell中的break/continue跳出循环
在循环遍历中,可以添加对应判断条件跳出循环,跳出循环可以使用break/continue,这个跟java语言是一样的,break是指跳出整个循环,continue是指跳出当前循环体,继续下一项循环. ...
- 【MAC】Mac下部分常用的小工具
Homebrew: 官方介绍:The missing package manager for OS X(OS X 不可或缺的套件管理器) /usr/bin/ruby -e "$(curl - ...
- Mybatis中使用集合、数组
一.简述 本文讲Mybatis中如何将传入参数为数组或者集合对象,进行遍历,组合Where条件中如in条件等内容. 有3种情况: 如果传入的是单参数且参数类型是一个List的时候,collection ...
- 【转】VS2015详细安装步骤
亲身经历记录下来,以备后用.也希望能够帮助到有需要的朋友们! 1.安装之前首先下载VS2015,下载地址: [VS2015社区版官方中文版下载]:http://download.microsoft.c ...
- Git 将代码回到指定版本
将代码回到hash为1fbcb7ea3b43df60c639875d2bb68e20b451059e的版本 git checkout 1fbcb7ea3b43df60c639875d2bb68e20b ...
- OpenLayers WorkShop 快速学习通道
学习地址:https://openlayers.org/workshop/en/ OpenLayers Workshop Introduction Basics Creating a map Zoom ...
- mysql存储过程详解 mysql存储过程和函数
第20章:存储程序和函数 目录 20.1. 存储程序和授权表 20.2. 存储程序的语法 20.2.1. CREATE PROCEDURE和CREATE FUNCTION 20.2.2. ALTER ...