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 相关文章推荐
top.location.href 没有权限 解决方法
Aug 05 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
treepanel动态加载数据实现代码
Dec 15 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
JavaScript实现单例模式实例分享
Dec 22 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 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
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
php计算title标题相似比的方法
2015/07/29 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
在IE下获取object(ActiveX)的Param的代码
2009/09/15 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
javascript的this关键字详解
2019/05/20 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
python实现绘制树枝简单示例
2014/07/24 Python
Django数据库表反向生成实例解析
2018/02/06 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
行政管理人员精品工作推荐信
2013/11/04 职场文书
七一党建活动方案
2014/01/28 职场文书
教育技术职业规划范文
2014/03/04 职场文书
七匹狼男装广告词
2014/03/21 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
销售督导岗位职责
2015/04/10 职场文书
活动经费申请报告
2015/05/15 职场文书
热爱劳动主题班会
2015/08/14 职场文书
python 常用的异步框架汇总整理
2021/06/18 Python
Python测试框架pytest高阶用法全面详解
2022/06/01 Python