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 相关文章推荐
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
JavaScript中的连字符详解
Nov 28 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
Nov 15 Javascript
基于javascript实现窗口抖动效果
Jan 03 Javascript
JavaScript面试题大全(推荐)
Sep 22 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
浅谈TypeScript 索引签名的理解
Oct 16 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
linux下为php添加curl扩展的方法
2011/07/29 PHP
基于php使用memcache存储session的详解
2013/06/25 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
Javascript中call与apply的学习笔记
2014/09/22 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
python进程管理工具supervisor使用实例
2014/09/17 Python
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
Python实现截屏的函数
2015/07/25 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
办公室前台岗位职责
2014/01/04 职场文书
大学生创业感言
2014/01/25 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
工作保证书
2015/01/17 职场文书
证券公司客户经理岗位职责
2015/04/09 职场文书
义卖募捐活动总结
2015/05/09 职场文书
保护地球的宣传语
2015/07/13 职场文书