分享jQuery网页元素拖拽插件


Posted in Javascript onDecember 01, 2020

效果说明:配合已有CSS样式,载入插件后,网页元素可以随意在窗口内拖拽,设置了原位置半透明和拖拽半透明的效果选项,可根据需要选择。另外,当页面上有多个可拖拽元素时,可以载入另外一个用于设置z-index的插件,模拟Windows窗口点击置顶效果。

分享jQuery网页元素拖拽插件

js/jquery.jLdraggable.js:

;(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拖拽特效 jQuery拖拽特效

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
Javascript 类与静态类的实现(续)
Apr 02 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
js函数在frame中的相互调用详解
Mar 03 Javascript
JavaScript和CSS交互的方法汇总
Dec 02 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
JS三级可折叠菜单实现方法
Feb 29 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
npm全局模块卸载及默认安装目录修改方法
May 15 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 Javascript
js前端面试常见浏览器缓存强缓存及协商缓存实例
Jun 21 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 #Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 #Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
Apr 20 #Javascript
Javascript之Date对象详解
Jun 07 #Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 #Javascript
javascript之Boolean类型对象
Jun 07 #Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 #Javascript
You might like
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
php实现将数组转换为XML的方法
2015/03/09 PHP
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
2017/01/20 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
简单通过settimeout看javascript的运行机制
2019/05/10 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
JS实现简易计算器
2020/02/14 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
python matlibplot绘制3D图形
2018/07/02 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
adidas澳大利亚官方网站:adidas Australia
2018/04/15 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
综合测评自我鉴定
2013/10/08 职场文书
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
高中生操行评语
2014/04/25 职场文书
产品包装策划方案
2014/05/18 职场文书
教师个人考察材料
2014/12/16 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers
python使用glob检索文件的操作
2021/05/20 Python
如何自己动手写SQL执行引擎
2021/06/02 MySQL
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis
JavaScript中10个Reduce常用场景技巧
2022/06/21 Javascript