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 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
childNodes.length与children.length的区别
May 14 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
微信小程序之页面拦截器的示例代码
Sep 07 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
Nov 20 Javascript
Vue项目中使用jquery的简单方法
May 16 jQuery
node 标准输入流和输出流代码实例
Sep 19 Javascript
vue路由传参页面刷新参数丢失问题解决方案
Oct 08 Javascript
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 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
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
PHP中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
wxPython中文教程入门实例
2014/06/09 Python
Python中IPYTHON入门实例
2015/05/11 Python
Python简单实现子网掩码转换的方法
2016/04/13 Python
python中的lambda表达式用法详解
2016/06/22 Python
django实现同一个ip十分钟内只能注册一次的实例
2017/11/03 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
快速查找Python安装路径方法
2020/02/06 Python
浅谈Python中的模块
2020/06/10 Python
Python: glob匹配文件的操作
2020/12/11 Python
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
2014年前台接待工作总结
2014/12/05 职场文书
宿舍管理制度范本
2015/08/07 职场文书
《失物招领》教学反思
2016/02/20 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python