div拖拽插件——JQ.MoveBox.js(自制JQ插件)


Posted in Javascript onMay 17, 2013

有一段时间没更新博客了,都不知道忙些什么,学习也没什么进展,惭愧。
这一周空闲的时间学着自己写一下JQ插件。

以前用原生的JS做过类似拖拽div的效果,现在按原思路改做成一个JQ的小插件,当作制作JQ插件的一个小练习。
html为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> 
<title></title> 
<style type="text/css"> 
*{margin:0;padding:0;} 
#box{width:500px;height:500px;margin:200px auto;position:relative;border:1px solid #ccc;border-left:2px solid #ccc;} 
.float-box{width:100px;height:100px;background:#000;color:#fff;position:absolute;top:20px;left:10px;cursor:move;z-index:2;border:2px solid #ccc;border-right:10px solid #fc0;} 
.float-box1{width:200px;height:200px;background:#f30;color:#fff;position:absolute;top:0;left:200px;cursor:move;border-top:10px solid #000;} 
</style> 
</head> 
<body> 
<div id="box"> 
<div class="float-box"></div> 
<div class="float-box1"></div> 
</div> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="JQ.MoveBox.js"></script> 
<script type="text/javascript"> 
$(".float-box").MoveBox(); 
$(".float-box1").MoveBox({out:true}); 
</script> 
</body> 
</html>

下面为JQ.MoveBox.js
(function($){ 
var n = 1; 
var o = {} 
$.fn.MoveBox=function(options){ 
var opts = $.extend({}, $.fn.MoveBox.defaults, options); 
return this.each(function(i){ 
$(this).mousedown(function(e){ 
o.iTop = $(this).position().top - e.pageY; 
o.iLeft = $(this).position().left - e.pageX; 
n++; 
$this = $(this); 
$this.css({'z-index':n}); 
$(document).bind("mousemove",function(e){ 
var iLeft = e.pageX + o.iLeft; 
var iTop = e.pageY + o.iTop; 
if(opts.out){ 
if(iLeft<-$this.parent().offset().left-parseInt($this.parent().css("border-left-width"))){ 
iLeft = -$this.parent().offset().left-parseInt($this.parent().css("border-left-width")); 
}else if(iLeft>$(document).width()-$this.width()-parseInt($this.css("border-left-width"))-parseInt($this.css("border-right-width"))-$this.parent().offset().left-parseInt($this.parent().css("border-left-width"))){ 
iLeft = $(document).width()-$this.width()-parseInt($this.css("border-left-width"))-parseInt($this.css("border-right-width"))-$this.parent().offset().left-parseInt($this.parent().css("border-left-width")); 
} 
if(iTop<-$this.parent().offset().top-parseInt($this.parent().css("border-top-width"))+$(document).scrollTop()){ 
iTop = -$this.parent().offset().top-parseInt($this.parent().css("border-top-width"))+$(document).scrollTop(); 
}else if(iTop>$(window).height()+$(document).scrollTop()-$this.height()-parseInt($this.css("border-top-width"))-parseInt($this.css("border-bottom-width"))-$this.parent().offset().top-parseInt($this.parent().css("border-top-width"))){ 
iTop = $(window).height()+$(document).scrollTop()-$this.height()-parseInt($this.css("border-top-width"))-parseInt($this.css("border-bottom-width"))-$this.parent().offset().top-parseInt($this.parent().css("border-top-width")); 
} 
}else{ 
if(iLeft<0){ 
iLeft = 0; 
}else if(iLeft>$this.parent().width()-$this.width()-parseInt($this.css("border-left-width"))-parseInt($this.css("border-right-width"))){ 
iLeft = $this.parent().width()-$this.width()-parseInt($this.css("border-left-width"))-parseInt($this.css("border-right-width")); 
} 
if(iTop<0){ 
iTop = 0; 
}else if(iTop>$this.parent().height()-$this.height()-parseInt($this.css("border-top-width"))-parseInt($this.css("border-bottom-width"))){ 
iTop = $this.parent().height()-$this.height()-parseInt($this.css("border-top-width"))-parseInt($this.css("border-bottom-width")); 
} 
} 
$this.css({ 
'left':iLeft +"px", 
'top':iTop + "px" 
}) 
}); 
$(document).bind("mouseup",function(){ 
$(document).unbind("mousemove"); 
$(document).unbind("mouseup"); 
}); 
}); 
}); 
}; $.fn.MoveBox.defaults = { 
out:false //默认不可跑出线外 
}; 
})(jQuery);
Javascript 相关文章推荐
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
原生Javascript和jQuery做轮播图简单例子
Oct 11 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 Javascript
react组件基本用法示例小结
Apr 27 Javascript
Javascript异步执行不按顺序解决方案
Apr 30 Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
May 17 #Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 #Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 #Javascript
JQuery设置和去除disabled属性的5种方法总结
May 16 #Javascript
javascript检测页面是否缩放的小例子
May 16 #Javascript
js获取键盘按键响应事件(兼容各浏览器)
May 16 #Javascript
js如何获取file控件的完整路径具体实现代码
May 15 #Javascript
You might like
怎样辨别一杯好咖啡
2021/03/03 新手入门
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
PHP数组及条件,循环语句学习
2012/11/11 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
JavaScript中的Document文档对象
2008/01/16 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
jQuery插件之validation插件
2017/03/29 jQuery
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
介绍Python的Django框架中的QuerySets
2015/04/20 Python
Python实现计算最小编辑距离
2016/03/17 Python
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
彻底搞懂Python字符编码
2018/01/23 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
职专应届生求职信
2013/11/16 职场文书
环境科学专业个人求职的自我评价
2013/11/28 职场文书
白酒市场开发计划书
2014/01/09 职场文书
主持人演讲稿
2014/05/13 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
银行进社区活动总结
2014/07/07 职场文书
2014年班主任工作总结
2014/11/08 职场文书