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

Question

jsFiddle

您会注意到可拖动对象的包含选项是 [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);
};