javascript - jQueryドラッグ可能が正しく含まれていないのはなぜですか？

Question

jsFiddle

ドラッグ可能なものの封じ込めオプションは[7、0、40、0]ですが、[0、0、32、0]である必要があると思います。ボタンをクリックして「オン」の位置にし、<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);
};