jquery网页元素拖拽插件效果及实现


Posted in Javascript onAugust 05, 2013

jquery网页元素拖拽插件效果及实现

;(function($){
$.fn.extend({
"jlzindex" : function(){ //用于判断和设置各个对话框的z-index
var $dragindex = $(this);
var arrzindex = new array();
for(var i=0; i < $dragindex.length; i++){ //初始化数组元素值,并按拖拽项顺序设置z-index值
var zidxnum = 10000 - i - i -2;
arrzindex[i] = {"getid":"drag" + ($dragindex.length - i),"zidx":zidxnum};
$("#drag" + ($dragindex.length - i)).css("z-index",zidxnum);
}
$dragindex.mousedown(function(){
var i = 0;
var dindex = 0;
while(arrzindex[i]){ //找到当前点击项在数组里的下标
if(arrzindex[i].getid == $(this).attr("id")){ dindex = i;}
i++;
}
for(var i = dindex; i >=0; i--){ //把点击项移至数组第一位,其他项后移
if(i > 0){
arrzindex[i].getid = arrzindex[i-1].getid;
$("#" + arrzindex[i].getid).css("z-index",arrzindex[i].zidx);
} else{
arrzindex[i].getid = $(this).attr("id");
$("#" + arrzindex[i].getid).css("z-index",arrzindex[i].zidx);
}
}
});
},
"jldraggable" : function(mod){ //拖拽插件
var model = mod;
var draggable = false; 
var $drag = $(this);
$drag.find(".dragbar").mousedown(function(e){
draggable = true;
var mouseleft = e.pagex - $drag.find(".dragbar").offset().left; //鼠标在拖拽区域中的横向距离
var mousetop = e.pagey - $drag.find(".dragbar").offset().top; //鼠标在拖拽区域中的横向距离
if(model == "cfade"){ //原位置元素半透明
$drag.clone(false).appendto("body").addclass("dragshadow").fadeto(0,0.2).css("z-index",parseint($drag.css("z-index")) - 1);
} else if(model == "dfade"){ //跟随鼠标元素半透明
$drag.clone(false).appendto("body").addclass("dragshadow").css("z-index",parseint($drag.css("z-index")) - 1);
$drag.fadeto(0,0.2);
}
$(document).mousemove(function(e){
if(draggable){
var winwidth = $(window).width();
var winheight = $(window).height();
var dragleft = e.pagex - mouseleft;
var dragtop = e.pagey - mousetop;
//拖拽框不能超出窗口边界
if(dragleft < 0){dragleft = 0;}
if(dragleft + $drag.width() > winwidth){
dragleft = winwidth - $drag.width();
}
if(dragtop < 0){dragtop = 0;}
if(dragtop + $drag.height() > winheight){
dragtop = winheight - $drag.height();
}
$drag.css("left",dragleft + "px");
$drag.css("top",dragtop + "px");
} else{
return false;
}
});
});
$(document).mouseup(function(){
draggable = false;
$(".dragshadow").remove();
if(model == "dfade"){
$drag.fadeto(0,1); 
}
});
}
})
})(jquery)

index.html:
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.jldraggable.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
$("#drag1").jldraggable(); //无参数,没有影子
$("#drag2").jldraggable("cfade"); //cfade,定义原位置半透明阴影
$("#drag3").jldraggable("dfade"); //dfade,定义跟随鼠标的半透明阴影
$(".dragindex").jlzindex(); //多个窗口的z-index处理
});
</script>
<style type="text/css">
.dragtitle{
width:120px;
height:27px;
background:url(images/drag_01.jpg);
cursor:move;
}
.dragcontent{
width:120px;
height:73px;
background:url(images/drag_02.jpg);
line-height:73px;
text-align:center;
}
#drag1{
width:120px; 
position:absolute; 
left:10px; 
top:10px;
}
#drag2{
width:120px; 
position:absolute; 
left:90px; 
top:90px;
}
#drag3{
width:120px; 
position:absolute; 
left:170px; 
top:170px;
}
</style>
<div id="drag1" class="dragindex">
<div class="dragbar dragtitle"></div>
<div class="dragcontent">无参数</div>
</div>
<div id="drag2" class="dragindex">
<div class="dragbar dragtitle"></div>
<div class="dragcontent">原位半透明</div>
</div>
<div id="drag3" class="dragindex">
<div class="dragbar dragtitle"></div>
<div class="dragcontent">拖拽半透明</div>
</div>
Javascript 相关文章推荐
正则表达式语法
Oct 09 Javascript
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
微信小程序开发animation心跳动画效果
Aug 16 Javascript
vue.js轮播图组件使用方法详解
Jul 03 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 06 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 #Javascript
js 判断计算字符串长度/判断空的简单方法
Aug 05 #Javascript
javascript显示用户停留时间的简单实例
Aug 05 #Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
Aug 05 #Javascript
JS字符串处理实例代码
Aug 05 #Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 #Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 #Javascript
You might like
Protoss兵种介绍
2020/03/14 星际争霸
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
php把数组值转换成键的方法
2015/07/13 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
JavaScript更改class和id的方法
2008/10/10 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
python查看微信好友是否删除自己
2016/12/19 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
python清除函数占用的内存方法
2018/06/25 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
后勤人员自我鉴定
2013/10/20 职场文书
八年级生物教学反思
2014/01/22 职场文书
公司年会主持词
2014/03/22 职场文书
社会学专业求职信
2014/07/17 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
python glom模块的使用简介
2021/04/13 Python
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
Golang入门之计时器
2022/05/04 Golang