效果说明:配合已有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网页元素拖拽插件的更多相关文章

  1. Selenium - 实现网页元素拖拽

    Drag and Drop, 使用鼠标实现元素拖拽的操作貌似很复杂, 在Selenium中, 借助OpenQA.Selenium.Interactions.Actions类库中提供的方法, 实现起来还 ...

  2. JQuery之拖拽插件

    一直以来,都对JS获取元素的位置感到非常的困惑:一会client.一会offset.一会scroll. 再加上各大浏览器之间的不兼容,唉,搞得哥晕晕乎乎的. 而很多页面效果都要用到这些位置.不得已,得 ...

  3. 网站开发常用jQuery插件总结(三)拖拽插件gridster

    1.gridster插件功能 实现类似于win8 磁贴拖拽的功能 2.gridster官方地址 http://gridster.net/ 在官方的网站上也有插件的帮助和实例,但是按照官方的说明,我在本 ...

  4. 一步一步实现JS拖拽插件

    js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠 ...

  5. 自己写一个jqery的拖拽插件

    说实话,jQuery比原生的js好用多了,本来想用原生写的,也写出来的,仅仅是,感觉不像插件,所以用jQuery实现了一版. 实现的功能:能够指定拖拽的边界,在拖拽过程中,能够触发几个自己定义事件 先 ...

  6. Jquery.Sorttable 桌面拖拽自定义

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. Js元素拖拽功能实现

    Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...

  8. Selenium WebDriver-通过ActionChains实现页面元素拖拽

    #encoding=utf-8 import unittest import time import chardet from selenium import webdriver class Visi ...

  9. WPF中元素拖拽的两个实例

    今天结合之前做过的一些拖拽的例子来对这个方面进行一些总结,这里主要用两个例子来说明在WPF中如何使用拖拽进行操作,元素拖拽是一个常见的操作,第一个拖拽的例子是将ListBox中的子元素拖拽到ListV ...

随机推荐

  1. cvsnt 设置用户、修改密码

    忘记密码后,可以用administrator 新建一个用户,使用这个用户的账号. password agent 设置clear password不好使..   cvsnt配置 创建用户1 .下载cvs ...

  2. 浅谈C/C++中的static和extern关键字 转

    原文:http://developer.51cto.com/art/201104/256820.htm static是C++中常用的修饰符,它被用来控制变量的存贮方式和可见性.extern, &quo ...

  3. ASP.NET 去除所有HTML标记的方法

    using System.Text.RegularExpressions /// <summary> /// 去除HTML标记 /// </summary> /// <p ...

  4. java命令模式

    命令模式 Command Pattern(Another Name:Action,Transaction) Encapsulate a request as an object ,thereby le ...

  5. Android(java)学习笔记77:网络编程的概述

    计算机网络 是指将地理位置不同的具有独立功能的多台计算机及其外部设备,通过通信线路连接起来,在网络操作系统,网络管理软件及网络通信协议的管理和协调下,实现资源共享和信息传递的计算机系统. 网络编程 就 ...

  6. css笔记04:属性选择器

    1.属性选择器: 带有 title 属性的所有元素设置样式: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  7. 通过 Session 操纵对象

    Session 接口是 Hibernate 向应用程序提供的操纵数据库的最主要的接口, 它提供了基本的保存, 更新, 删除和加载 Java 对象的方法. Session 具有一个缓存, 位于缓存中的对 ...

  8. CSS-Sprite-Generator丨CSS雪碧在线生成器

    http://cn.spritegen.website-performance.org/ Css Sprite Tools实现背景图片整合 http://www.onlinedown.net/soft ...

  9. c#语法笔记

    书写代码需要注意的地方: 1.代码中出现的所有标点都是英文半角 shift键快速切换中文半角和英文半角 shift+空格 切换全角/半角 2.在c#代码中,每行代码的结束,我们都以分号结束,注意:这个 ...

  10. CSE(Corrupted State Exceptions) 严重异常处理办法

    原因分析 出现这个问题说明.NET版本至少是4.0,因为微软在.NET 4.0版本中更改了异常处理机制.微软认为catch(Exception)这种写法是不负责任的,程序员应该按照异常严重类别决定程序 ...