分享jQuery网页元素拖拽插件

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

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

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

(0)

相关推荐

  • 简单的jquery拖拽排序效果实现代码

    步骤: 1.实现随鼠标移动的效果: 2.初始化一个元素及其坐标: 3.拖拽对象的最后坐标,与元素的坐标 进行计算和判断 来确定 要插入的目标元素: 4.用insertBefore 方法 插入到目标元素的前面 具体代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&

  • jquery+CSS3实现3D拖拽相册效果

    很久之前练习过的一个实践,复习完渐变.圆角.3D变形.拖拽等等来看源码,估计还不会太凌乱(◎﹏◎)哈哈哈 效果图: HTML: <!doctype html> <html onselectstart="return false;" lang="en"><!-- !important --> <head> <meta charset="UTF-8"> <title>3D拖拽相册

  • 基于jQuery实现拖拽图标到回收站并删除功能

    本文利用jQuery实现一个拖拽删除桌面小图标的功能,使用起来就像操作系统的回收站一样,我们只需要拖动应用图标至垃圾箱即可删除这个图标,分享给大家,具体实现方法如下 运行效果图: 引入核心文件 这里需要引入jquery,jquery ui,与jquery ui css <link rel="stylesheet" href="assets/css/jquery-ui.css" /> <script src="js/jquery/1.8.3

  • jQuery拖拽div实现思路

    思路是利用jquery的mousemove,mousedown,mouseup三个事件,定义两个相对位置,分别是 1.组件左上角与屏幕左上角的相对位置 2.鼠标所在坐标与组件左上角的相对位置. 具体函数如下: 复制代码 代码如下: .drag{ position:absolute; background:#0000CC; top:100px;left:200px; padding:0; } 复制代码 代码如下: $(document).ready(function(){ var move=fal

  • jQuery插件实现文件上传功能(支持拖拽)

    先贴上源代码地址,点击获取.然后直接进入主题啦,当然,如果你觉得我有哪里写的不对或者欠妥的地方,欢迎留言指出.在附上一些代码之前,我们还是先来了解下,上传文件的时候需要利用的一些必要的知识. 首先我们要说的就是FileReader对象,这是一个HTML5提出的,专门用来异步的读取用户计算机上文件的对象,这里有详细的介绍.所以如果我们想要使用它,那么首先我们得先创建一个FileReader对象.  var fr = new FileReader() 1.这个对象拥有五个方法: 下面附上一个例子:

  • JQuery之拖拽插件实现代码

    而很多页面效果都要用到这些位置.不得已,得练练,得记记. 下面就来说说这个基于 JQuery的简易拖拽插件吧. 按惯例,先说说拖拽的原理,以及搞这么一个东东的步骤: 那什么是拖拽呢? 看名字就知道了:就是把一个东东拖来拽去的. 放到我们的DOM上,就是改变它的位置. 它只有两个难点:1.如何知道是在拖? 2.如何知道从哪拖,拖到哪? 其实,这也算不上难点,毕竟两者都是基础的东西,关键在于熟练. 换到js 中,我们搞一个拖拽效果,大致有如下步骤: 1.让元素捕获事件(一般情况下,无非就是mouse

  • jquery利用拖拽方式在图片上添加热链接

    本文实例讲述了jquery利用拖拽方式在图片上添加热链接的实现过程,分享给大家供大家参考.具体如下: 运行效果截图如下: 项目的需求,要在一张图片上加不同的链接,比如说,图片是一个套房,里面有沙发,茶几,酒柜,电视柜等,然后在这些物件上加一个超链接,点击后打开相关产品的介绍. 用jquery写了一个在图片添加锚点的功能,实现的原理:一个文本框写入标题,一个文本框写链接,一个添加按钮,一个编辑按钮,当写好内容后点击添中添加,便会在图片的上方出现一个P标签,然后按着鼠标左键拖拽该标签放到相应的地方松

  • 如何使用jQuery Draggable和Droppable实现拖拽功能

    在以前的文章中我已经介绍了web开发中基本拖放原理,现在给出需要完成的功能.最后运行的效果如下图所示: 主要功能需求说明:1.左侧的元素结构最后会通过Ajax call服务器的数据来生成,能支持多级元素.父节点可以折叠起来 2.用户可以通过拖放的操作,将元素从左侧拖放到右侧.如果是拖的父节点元素,那么需要把它子节点的元素一并拖到右边 3.元素放到右侧,右侧可以接受元素的区域有2种可能.一种新建一个区域,就类似"华东交通大学"所示.另外一种就是拖放到已经有元素的区域.两者的关系是&quo

  • JQuery UI的拖拽功能实现方法小结

    JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念. ource:拖拽源,要拖动的元素. taerget:拖放目标,能够放入source的容器. 拖拽的动作分解如下: 1. drag start:在拖拽源(source)上按下鼠标并开始移动 2. drag move: 移动过程中 3. drag enter: 移动进入目标(target)容器 4.

  • JQuery Dialog(JS 模态窗口,可拖拽的DIV)

    效果图 调用示意图 交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的"提交"按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户提交事件. 2.用OO的概念来说,JQueryDialog.Ok()其实是一个虚函数,它的逻辑封装在子窗口ContentWindow.Ok()中,这一点我借鉴了FCKEditor,如下代码所示: JS代码 复制代码 代码如下: var JQueryDialog = { /// <summ

随机推荐