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选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
JavaScript验证知识整理
Mar 24 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 Javascript
微信小程序实现弹出菜单功能
Jun 12 Javascript
vue项目中实现的微信分享功能示例
Jan 21 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
手把手带你搭建一个node cli的方法示例
Aug 07 Javascript
vue项目接口域名动态获取操作
Aug 13 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获取英文姓名首字母的方法
2015/07/13 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
js图片预加载示例
2014/04/30 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
python生成词云的实现方法(推荐)
2017/06/13 Python
儿童python练习实例
2018/05/27 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
Python实现手势识别
2020/10/21 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
linux比较文件内容的命令是什么
2013/03/04 面试题
房屋租赁协议书
2014/04/10 职场文书
股份转让协议书
2014/04/12 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
离婚协议书格式
2014/11/21 职场文书
校运会加油稿大全
2015/07/22 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android
vue组件vue-esign实现电子签名
2022/04/21 Vue.js