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 相关文章推荐
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
详解数组Array.sort()排序的方法
May 09 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
Sep 27 Javascript
原生Vue 实现右键菜单组件功能
Dec 16 Javascript
详解JSON.stringify()的5个秘密特性
May 26 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 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 删除cookie和浏览器重定向
2009/03/16 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
jquery 元素相对定位代码
2010/10/15 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
Python脚本实现代码行数统计代码分享
2015/03/10 Python
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
Python多线程编程(一):threading模块综述
2015/04/05 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
python进度条显示之tqmd模块
2020/08/22 Python
基于python实现坦克大战游戏
2020/10/27 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
荷叶圆圆教学反思
2014/02/01 职场文书
承诺书范文
2014/06/03 职场文书
考研英语复习计划
2015/01/19 职场文书
维稳工作承诺书
2015/01/20 职场文书
开除通知书范本
2015/04/25 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
初中生物教学反思
2016/02/20 职场文书
解决MySQL报“too many connections“错误
2022/04/19 MySQL