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 相关文章推荐
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
初窥JQuery(二)事件机制(2)
Dec 06 Javascript
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 Javascript
JS版的date函数(和PHP的date函数一样)
May 12 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 Javascript
一文搞懂ES6中的Map和Set
May 20 Javascript
Javascript模块化机制实现原理详解
Apr 02 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
php_xmlhttp 乱码问题解决方法
2009/08/07 PHP
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
PHP eval函数使用介绍
2013/12/08 PHP
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
Node.js文件操作详解
2014/08/16 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
Python输出9*9乘法表的方法
2015/05/25 Python
Python赋值语句后逗号的作用分析
2015/06/08 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
Linux下Pycharm、Anaconda环境配置及使用踩坑
2018/12/19 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
JSP&Servlet技术面试题
2015/05/21 面试题
PyQt QMainWindow的使用示例
2021/03/24 Python
企业承诺书怎么写
2014/05/24 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
教育读书笔记
2015/07/02 职场文书