<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>