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 相关文章推荐
JQuery 图片延迟加载并等比缩放插件
Nov 09 Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
Javascript中 关于prototype属性实现继承的原理图
Apr 16 Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
子页向父页传值示例
Nov 27 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
JS实现购物车特效
Feb 02 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
学习Vue组件实例
Apr 28 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 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调试工具strace与gdb的常用命令总结
2013/06/03 PHP
PHP中的替代语法简介
2014/08/22 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
Vue异步加载about组件
2017/10/31 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
vue加载自定义的js文件方法
2018/03/13 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
selenium+python实现自动登录脚本
2018/04/22 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
python实现udp聊天窗口
2020/03/31 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
2014年六一儿童节演讲稿
2014/05/23 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
详解Redis集群搭建的三种方式
2021/05/31 Redis
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android
netty 实现tomcat的示例代码
2022/06/05 Servers