为什么我的jQuery draggable没有正确包含？

Question

jsFiddle

您会注意到draggable的包含选项是[7,0,40,0]，但我觉得它们应该是[0,0,32,0]。如果你单击按钮使其处于“ON”位置并拖动<div>（圆形滑块的东西），你会发现它向左偏远而且不够右。我无法弄清楚为什么会这样。这是问题的图片，非常轻微。

这就是我拖动它时的目的：

谢谢！

HTML：

<section></section>
<div></div>

CSS：

section {
    background-image: url(http://www.rsadler.com/OnOff_slider_small.png);
    width: 57px;
    height: 25px;
    margin: 0;
    padding: 0;
}
section:hover{
    cursor: pointer;
}
section.ON {
    background-position: 82px 0px;
}
div {
    background-image: url(http://www.rsadler.com/OnOff_slider_small.png);
    background-position: 26px 0px;
    position: relative;
    height: 24px;
    width: 25px;
    margin: -25px 0px 0px 0px;
    padding: 0;
}
div:hover {
    cursor: pointer;
}

JS：

$(document).ready(function(){
    $('section').click(function(){
        if ($(this).hasClass('ON')) {
            $(this).removeClass('ON');
            $(this).next().slideLeft();
        } else {
            $(this).addClass('ON');
            $(this).next().slideRight();
        }     
    }); 
    $('div').click(function(){
        if ($(this).prev().hasClass('ON')) {
            $(this).slideLeft();
            $(this).prev().removeClass('ON');
        } else {
            $(this).slideRight();
            $(this).prev().addClass('ON');
        }     
    });

    $('div').draggable({
        axis: 'x',
        containment: [7, 0, 40, 0]   // why do I have to put 7 as the x1 value? It should be 0
    });
});

jQuery.fn.slideRight = function() {
    var o = $(this[0])
    o.animate({
        'left': '32px'
    }, 300);
};
jQuery.fn.slideLeft = function() {
    var o = $(this[0])
    o.animate({
        'left': '0'
    }, 300);
};