拖放验证实现问题

html

<div id="bg">
    <div id="drag" dragable="ture"></div>
    <span>请按住滑块,拖动到最右边</span>
</div>

---

JavaScript

jQuery(function($){
    //定义dragable监听滑块状态
    var dragable = false;
    var x,dragWidth;
    $drag = $("#drag");
    $box = $("#bg");
    //获取原始位置
    var originWidth = $drag.offset().left;
    $drag.mousedown(function(e){
        //拖动最大宽度
        var maxWidth = $box.width()-$drag.width();
        $drag.mousedown(function(e){
            dragable = true;
            x = e.pageX;
        }).mousemove(function (e) {
             if(!dragable){return false}
             dragWidth = e.pageX - x;
             if(dragWidth<maxWidth){
                 $drag.offset().left = originWidth + dragWidth;
             }else{
                 $drag.offset().left = originWidth + maxWidth;
             }
        }).mouseup(function(e){
            dragable = false;
            if(dragWidth<maxWidth){
                $drag.offset().left = originWidth;
            }else{
                $drag.offset().left = originWidth + maxWidth;
            }
        });
    })
});

---

效果图

---

但是无法拖动.drag这个div,还望各位看看哪里出了问题