• 使用jQuery实现简单的拖动效果


     转自:http://www.muzilei.com/archives/136

    如何实现拖动效果?

    浏览DEMO

    首先分析下拖动效果原理:

    1.当鼠标在被拖动对象上按下鼠标(触发onmousedown事件,且鼠标在对象上方)

    2.开始移动鼠标(触发onmousemove事件)

    3.移动时更显对象的top和left值

    4.鼠标放开停止拖动(触发onmouseup事件)

    注意:拖动的对象必须是定位对象(即设置了position:absolute或 relative)。

    也就是说拖动事件=onmousedown事件+onmousemove事件

    整个过程就是处理这三个事件来模拟drag事件

    现在看看我实现的源代码:

    html代码:

    1 <div class="drag">
    2   <p class="title">标题(点击标题拖动)</p>
    3 </div>
    4  
    5 <div class="drag1">
    6   <p class="title">标题</p>
    7   点击我移动
    8 </div>

    jquery插件代码:

    1 (function($){
    2     $.fn.drag=function(options){
    3  
    4     //默认配置
    5     var defaults = {
    6         handler:false,
    7         opacity:0.5
    8         };
    9  
    10        // 覆盖默认配置
    11     var opts = $.extend(defaults, options);
    12  
    13     this.each(function(){
    14  
    15     //初始标记变量
    16     var isMove=false,
    17     //handler如果没有设置任何值,则默认为移动对象本身,否则为所设置的handler值
    18     handler=opts.handler?$(this).find(opts.handler):$(this),
    19     _this=$(this), //移动的对象
    20     dx,dy;
    21  
    22     $(document)
    23     //移动鼠标,改变对象位置
    24     .mousemove(function(event){
    25     // console.log(isMove);
    26     if(isMove){
    27  
    28     //获得鼠标移动后位置
    29     var eX=event.pageX,eY=event.pageY;
    30  
    31     //更新对象坐标
    32     _this.css({'left':eX-dx,'top':eY-dy});
    33  
    34             }
    35         })
    36  
    37     //当放开鼠标,停止拖动
    38     .mouseup(function(){
    39         isMove=false;
    40         _this.fadeTo('fast', 1);
    41         //console.log(isMove);
    42             });
    43  
    44     handler
    45     //当按下鼠标,设置标记变量isMouseDown为true
    46     .mousedown(function(event){
    47  
    48     //判断最后触发事件的对象是否是handler
    49     if($(event.target).is(handler)){
    50  
    51         isMove=true;
    52         $(this).css('cursor','move');
    53  
    54         //console.log(isMove);
    55         _this.fadeTo('fast', opts.opacity);
    56  
    57         //鼠标相对于移动对象的坐标
    58         dx=event.pageX-parseInt(_this.css("left"));
    59         dy=event.pageY-parseInt(_this.css("top"));
    60  
    61             }
    62                 });
    63         });
    64     };
    65  })(jQuery);

    调用方法:

    1 $(function(){
    2  
    3 //拖动标题
    4 $(".drag").drag({
    5     handler:$('.title'),//操作拖动的对象,此对象必须是移动对象的子元素
    6     opacity:0.7 //设置拖动时透明度
    7     });
    8  
    9 //拖动主体对象
    10 $(".drag1").drag({
    11      opacity:0.7
    12      });
    13  
    14 });

    浏览DEMO

  • 相关阅读:
    ubuntu14.0 服务器webmin安装
    python如何简单的处理图片(1):打开显示
    如何在YouTube上下载视频
    Ubuntu下下载使用sublime
    IndentationError: unexpected indent
    Linux下vim显示行数
    Linux下tree的使用介绍
    Mac利用分屏spliter
    redis开机自启动脚本(linux)
    java 反射应用
  • 原文地址:https://www.cnblogs.com/cugwx/p/3589941.html
Copyright © 2020-2023  润新知