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.validate使用攻略 第二部
Jul 01 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
JS非空验证及邮箱验证的实例
Aug 11 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
Javascript实现动态时钟效果
Nov 17 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
如何在 Vue 表单中处理图片
Jan 26 Vue.js
文字溢出实现溢出的部分再放入一个新生成的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
smarty实例教程
2006/11/19 PHP
newxtree.js代码
2007/03/13 Javascript
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
Prototype框架详解
2015/11/25 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
python3 re返回形式总结
2020/11/20 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
护士专业推荐信
2013/11/02 职场文书
学期自我鉴定
2013/11/04 职场文书
医药专业应届毕业生求职信范文
2014/01/01 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
巴西世界杯32强口号
2014/06/05 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript