首页 新闻 搜索 专区 学院

下面一个拖拽代码我看不太懂,有那位高手能在每行代码前帮我解释下的

0
悬赏园豆:40 [已解决问题] 解决于 2010-07-28 16:39

<script type="text/javascript">
 (function($){
  $.fn.draggable=function(s) {
    if(this.size()>1)
     return this.each(function(i,o){
       $(o).draggable(s)
     });
     var t=this,//这个this是指向哪里
         h=s?t.find(s):t,
         m={},
         to=false,
         d=function(v){
          v.stopPropagation();
          m={
          ex:v.clientX,
          ey:v.clientY,
           x:t.css("position")=="relative"?parseInt(t.css("left")):t.position().left,
           y:t.css("position")=="relative"?parseInt(t.css("top")):t.position().top,
          fw:t.get(0).style.width,
           w:t.width()
          };
          if(t.css("position")=="static")
            to={"left":m.x,"top":m.y};
          $(document).mousemove(b).mouseup(e);
          if(document.body.setCapture)
            document.body.setCapture();
            debug(m);
         },
         b=function(v){
           t.css({"left":v.clientX-m.ex+m.x,"top":v.clientY-m.ey+m.y});
         },
         e=function(v){
           if(document.body.releaseCapture)
             document.body.releaseCapture();
             $(document).unbind("mousemove").unbind("mouseup");
         };
        h.mousedown(d);
        return t;
  };
})(jQuery);
$(document).ready(function(){
  $(".draggable").draggable("dt:eq(0)")
  $("#left").draggable()
  $("#reletive").draggable()
  $("img").draggable()
})
  function debug(m){
    document.title="ex="+m.ex+"ey="+m.ey+"x="+m.x+"y="+m.y+"fw="+m.fw+"w="+m.w;
  }
</script>

加油吧的主页 加油吧 | 初学一级 | 园豆:56
提问于:2010-07-28 09:25
< >
分享
最佳答案
0

<script type="text/javascript">
/*
 * 首先,这个函数写得很不好,用的过程中会出现各种问题,感觉会很“别扭”
 * 其过程如下:
 * 1、mousedown的时候把鼠标锁在元素上
 * 2、记录下鼠标和元素左上角的距离
 * 3、在document上监听鼠标移动和放开
 * 4、移动鼠标时,获取鼠标的位置,减去原本鼠标和元素左上角的位置,就是元素应该在的位置
 * 5、设定元素的left和top一跟着移动元素
 * 6、mouseup时去掉mousemove和mouseup事件
 */
$.fn.draggable = function(s) {
    //当传入的size()大于1时,说明传入的是一系列的元素,则对每一个元素调用draggable
    if(this.size() > 1)
        return this.each(function(i, o) {
        $(o).draggable(s)
    });
        //这里的this是jQuery对象
    var t = this,
        //Boolean变量,当draggable函数调用时有参数传入,则此参数作为一个选择器,将托运效果用于进一步选择后的元素
        h = s ? t.find(s) : t,
        //应用拖动效果时需要的一系列变量的封装对象
        m = {},
        to = false,
        //事件函数,注册到元素的mousedown事件上
        d = function(v) {
            v.stopPropagation();
            m = {
                ex: v.clientX, //鼠标X坐标
                ey: v.clientY, //鼠标Y坐标
                x: t.css("position") == "relative" ? parseInt(t.css("left")) : t.position().left, //被拖动的元素的X坐标
                y: t.css("position") == "relative" ? parseInt(t.css("top")) : t.position().top, //被拖动的元素的Y坐标
                fw: t.get(0).style.width, //被拖动的元素的CSS宽度
                w: t.width() //被拖动的元素的真实宽度
            };
            if(t.css("position") == "static") { //如果元素为普通定位(非relative、absolute或fixed)
                to = { "left": m.x, "top": m.y }; //记录下元素当前的位置
                //从代码来看,当position为static的时候,似乎拖不起来,有点奇怪,是不是一个BUG?
            }
            //给文档注册上mousemove和mouseup事件,以方便拖动
            //这里把事件注册在document上,而不是元素上,是因为鼠标拖得太快的时候,可能会在元素动前移到元素外
            //此时mousemove和mouseup事件就无法触发,导致拖动效果被破坏
            $(document).mousemove(b).mouseup(e);
            //这个setCapture好像是IE的功能,拿得鼠标锁定在当前指着的元素上,永远也不会移出去
            //因为只有IE有这个功能,所以要判断能不能调用,随后再调用一下
            if (document.body.setCapture) {
                document.body.setCapture();
            }
            //记录信息,无意义
            debug(m);
        },
        //事件函数,注册到元素的mousemove事件上
        b = function(v) {
            //这里是真正的移动元素,其中m.ex - m.x就是鼠标和元素左边的距离,m.ey - m.y是鼠标和元素上边的距离
            //v.clientX - m.ex + m.x看成v.clientX - (m.ex - m.x)
            //其实就是获取鼠标当前的位置,然后减掉鼠标按下时和元素左上角的距离来确定元素应该在的位置
            t.css({"left": v.clientX - m.ex + m.x, "top": v.clientY - m.ey + m.y});
        },
        //事件函数,注册到元素的mouseup事件上
        e = function(v){
            //和setCapture一样,功能是解放鼠标锁定
            if (document.body.releaseCapture) {
                document.body.releaseCapture();
            }
            //去掉mousemove和mouseup事件,一次拖动结束
            $(document).unbind("mousemove").unbind("mouseup");
        };
        //注册mousedown事件
        h.mousedown(d);
        //把jQuery对象再返回回去,方便后面链式调用其他函数
        return t;
};
</script>

收获园豆:40
Gray Zhang | 专家六级 |园豆:17610 | 2010-07-28 13:53
谢谢高手,虽然函数写的不太好,但是对我来说最少是个起点 分都给你了
加油吧 | 园豆:56 (初学一级) | 2010-07-28 16:39
其他回答(1)
0

这个this是指向哪里

简单的说,这个this就是你想要拖拽的那个东西本身。

Pandora | 园豆:257 (菜鸟二级) | 2010-07-28 16:34
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册