<!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 拖拽的更多相关文章

  1. jq 拖拽

    1.尼玛, move事件的时候忘了加ev,找了一个多小时 <!DOCTYPE html> <html> <head lang="en"> < ...

  2. jq拖拽插件

    (function ($) { var move = false; //标记控件是否处于被拖动状态 var dragOffsetX = 0; //控件左边界和鼠标X轴的差 var dragOffset ...

  3. Jquery拖拽,拖动排序插件

    上github搜jquery-sortable <!-- jq拖拽排序 --> <script src="${contextPath}/static/excelTable/ ...

  4. jQ插件--时间线插件和拖拽API

    这个时间轴是工作上用到的,自己写了一个, qq空间有时间轴的控件, 百度文库也有时间轴的控件: 百度的时间轴大概是这样的: 用户点击对应的锚链接,  那个三角会滚动, 然后左侧的界面也会滚动: 实际的 ...

  5. JQ实现3D拖拽效果

    <!DOCTYPE HTML> <html onselectstart='return false'> <head> <meta http-equiv=&qu ...

  6. 基于 jq 实现拖拽上传 APK 文件,js解析 APK 信息

    技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档 参考:前端解析ipa.apk安装包信息 - ...

  7. jq实现拖拽

    $("body").delegate( ".msg-layer",{ mousedown: function (e) { var el = $(".m ...

  8. Jquery 多行拖拽图片排序 jq优化

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 不断优化,重构我的代码-----拖拽jquery插件

    最近学东西学的有点太散了,歇一阵子,重新完善之前的JQ插件,今天先上拖拽吧 // JavaScript Document (function($){ var defaults = { actionEl ...

随机推荐

  1. Jsoup的简易使用示例

    http://www.open-open.com/jsoup/parsing-a-document.htm 测试用网页 <!doctype html> <!-- http://jwc ...

  2. golang gob 有什么优势? gob/protobuf/json/xml 效率对比,benchmark 压力测试

    TODO 待研究: https://blog.csdn.net/love_se/article/details/7941876 https://blog.csdn.net/wangshubo1989/ ...

  3. android: 在APP中显示高德地图SDK

    一.搭建环境 参考资料:http://lbs.amap.com/api/android-sdk/guide/create-project/android-studio-create-project  ...

  4. ORACLE通过SQL将一行数据转换为多行

    转换前和需要转成的格式如下图: sql语句如下: , ; 效果如下:

  5. [转]rsync命令中文文档

    原文链接 rsync是一个快速.多功能的远程(和本地)文件拷贝工具. 摘要 Local: rsync [OPTION...] SRC... [DEST] Access via remote shell ...

  6. 【转载】Linux下查看CPU、内存占用率

    不错的文章(linux系统性能监控--CPU利用率):https://blog.csdn.net/ctthuangcheng/article/details/52795477 在linux的系统维护中 ...

  7. Spark 官方博文专区(目录)

    关于转载一些 Spark 官方的文档以及 DataBricks 公司博文,本系列基本是中英双语,主要是为了提高自己的英语水平. 文章分类 spark databricks A Tale of Thre ...

  8. Resnet BN

    [深度学习]深入理解Batch Normalization批标准化 https://www.zhihu.com/topic/20084849/hot resnet(残差网络)的F(x)究竟长什么样子? ...

  9. why deep learning works

    https://medium.com/towards-data-science/deep-learning-for-object-detection-a-comprehensive-review-73 ...

  10. FastDFS特性及问题思考

    FastDFS是国人开发的一款分布式文件系统,目前社区比较活跃.系统中存在三种节点:Client.Tracker.Storage,在底层存储上通过逻辑的分组概念,使得通过在同组内配置多个Storage ...