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 相关文章推荐
javascript实现动态CSS换肤技术的脚本
Jun 29 Javascript
js 蒙版进度条(结合图片)
Mar 10 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
vue底部加载更多的实例代码
Jun 29 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 Javascript
抖音短视频(douyin)去水印工具的实现代码
Mar 30 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 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
php SQL Injection with MySQL
2011/02/27 PHP
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
Python编写百度贴吧的简单爬虫
2015/04/02 Python
Python正则表达式使用范例分享
2016/12/04 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
python实现雨滴下落到地面效果
2018/06/21 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
django 自定义过滤器的实现
2019/02/26 Python
python 求10个数的平均数实例
2019/12/16 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
python用700行代码实现http客户端
2021/01/14 Python
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
酒店总经理助理岗位职责
2014/02/01 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
工作时间调整通知
2015/04/24 职场文书
推销搭讪开场白
2015/05/28 职场文书
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL
Vue Element plus使用方法梳理
2022/12/24 Vue.js