jQuery网页元素拖拽插件
效果说明:配合已有CSS样式,载入插件后,网页元素可以随意在窗口内拖拽,设置了原位置半透明和拖拽半透明的效果选项,可根据需要选择。另外,当页面上有多个可拖拽元素时,可以载入另外一个用于设置z-index的插件,模拟Windows窗口点击置顶效果。
演示地址:http://frontendcode.sinaapp.com/J-Lui/jQuery-jLdraggable-plugin/
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>
jQuery网页元素拖拽插件的更多相关文章
- Selenium - 实现网页元素拖拽
Drag and Drop, 使用鼠标实现元素拖拽的操作貌似很复杂, 在Selenium中, 借助OpenQA.Selenium.Interactions.Actions类库中提供的方法, 实现起来还 ...
- JQuery之拖拽插件
一直以来,都对JS获取元素的位置感到非常的困惑:一会client.一会offset.一会scroll. 再加上各大浏览器之间的不兼容,唉,搞得哥晕晕乎乎的. 而很多页面效果都要用到这些位置.不得已,得 ...
- 网站开发常用jQuery插件总结(三)拖拽插件gridster
1.gridster插件功能 实现类似于win8 磁贴拖拽的功能 2.gridster官方地址 http://gridster.net/ 在官方的网站上也有插件的帮助和实例,但是按照官方的说明,我在本 ...
- 一步一步实现JS拖拽插件
js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠 ...
- 自己写一个jqery的拖拽插件
说实话,jQuery比原生的js好用多了,本来想用原生写的,也写出来的,仅仅是,感觉不像插件,所以用jQuery实现了一版. 实现的功能:能够指定拖拽的边界,在拖拽过程中,能够触发几个自己定义事件 先 ...
- Jquery.Sorttable 桌面拖拽自定义
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Js元素拖拽功能实现
Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...
- Selenium WebDriver-通过ActionChains实现页面元素拖拽
#encoding=utf-8 import unittest import time import chardet from selenium import webdriver class Visi ...
- WPF中元素拖拽的两个实例
今天结合之前做过的一些拖拽的例子来对这个方面进行一些总结,这里主要用两个例子来说明在WPF中如何使用拖拽进行操作,元素拖拽是一个常见的操作,第一个拖拽的例子是将ListBox中的子元素拖拽到ListV ...
随机推荐
- XCode中调整字体大小
转自:http://www.cnblogs.com/mengshu-lbq/archive/2012/12/24/2830859.html 1)调出Xcode的preference应该是 Comman ...
- Python_爬虫3
正则表达式 在前面我们已经搞定了怎样获取页面的内容,不过还差一步,这么多杂乱的代码夹杂文字我们怎样把它提取出来整理呢?下面就开始介绍一个十分强大的工具,正则表达式! 1.了解正则表达式 正则表达式是对 ...
- 图片onerror(转)
<script type="text/javascript"> <!– function nofind(){ var img=event.srcElement; ...
- 【AR】增强现实安卓编程 - Vuforia SDK 的安装和使用 (Android Studio)
Vuforia是个强大的AR平台.使用Vuforia API 可以实现物体识别,图片追踪,柱型追踪,多对象追踪,自定义目标追踪,云识别,文字识别,帧标识和虚拟按钮等功能. 它支持Android, iO ...
- Objective-C ,ios,iphone开发基础:http网络编程
- (IBAction)loadData:(id)sender { NSURL* url = [NSURL URLWithString:@"http://162.105.65.251:808 ...
- Eclipse+Axis使用WSDL文件生成Web Service服务端/客户端
JDK版本:1.5.0_22 Eclipse版本:Helios Service Release 2(3.6.2) WSDL文件的创建过程见http://blog.csdn.net/a19881029/ ...
- hihocoder 1066 无间道之并查集
#1066 : 无间道之并查集 时间限制:20000ms 单点时限:1000ms 内存限制:256MB 描述 这天天气晴朗.阳光明媚.鸟语花香,空气中弥漫着春天的气息……额,说远了,总之,小Hi和小H ...
- 纯css 写三角形
<div style="width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid tr ...
- webstorm 配置node babel编译es6
- javascript+dom 做javascript图片库
废话不多说 直接贴代码 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...