Javascript jquery拖拽的元素不会停留在被拖放的位置

尝试查看以下JSFIDLE

当我拖动“拆分器”元素时，它不会保持在原位

我错过了什么

Html

Javascript

jQuery(document).ready(function () {
    $("#splitter").draggable({
        axis: "x",
        start: function (event, ui) {
            // Show start dragged position of image.
            var Startpos = $(this).position();
            var startLeft = (Startpos.left - $("#container").position().left);
            var startRight = (startLeft + $("#splitter").outerWidth());

            $("#start").text("START: \nLeft: " + startLeft + "\nTop: " + startRight);
        },
        stop: function (event, ui) {
            // Show dropped position.
            var Stoppos = $(this).position();
            var stopLeft = (Stoppos.left - $("#container").position().left);
            var stopRight = (stopLeft + $("#splitter").outerWidth());

            $("#stop").text("STOP: \nLeft: " + stopLeft + "\nTop: " + stopRight);

            $("#index").css({ "width": stopLeft });
            $("#content").css({ "width": ($("#container").outerWidth() - stopRight) });
        }
    });
});

---

我找到了一个解决方案，将css更改为绝对位置，并稍微更改html和javascript

Javascript

<script type="text/javascript">
    jQuery(document).ready(function () {
        $("#splitter").draggable({
            axis: "x",
            containment: "parent",
            start: function (event, ui) {
                // Show start dragged position of image.
                var Startpos = $(this).position();
                var startLeft = ($("#container").position().left - Startpos.left);
                var startRight = (startLeft + $("#splitter").outerWidth());

                $("#start").text("START: \nLeft: " + startLeft + "\nTop: " + startRight);
            },
            stop: function (event, ui) {
                // Show dropped position.
                var Stoppos = $(this).position();
                var stopLeft = (Stoppos.left);
                var stopRight = (stopLeft + $("#splitter").outerWidth());

                $("#stop").text("STOP: \nLeft: " + stopLeft + "\nTop: " + stopRight);

                $("#index").css({ "width": stopLeft });
                $("#splitter").css({ "left": stopLeft });
                $("#content").css({ "width": ($("#container").outerWidth() - stopRight), "left": stopRight });
            }
        });
    });
</script>

jQuery（文档）.ready（函数（）{
$（“#拆分器”）。可拖动({
轴：“x”，
遏制：“家长”，
开始：功能（事件、用户界面）{
//显示图像的开始拖动位置。
var Startpos=$（this.position（）；
var starteft=（$（“#容器”）.position（）.left-Startpos.left）；
var startRight=（starteft+$（“#拆分器”）.outerWidth（）；
$（“#开始”）.text（“开始：\nLeft:+starteft+”\nTop:+startRight）；
},
停止：功能（事件、用户界面）{
//显示下降的位置。
var Stoppos=$（this.position（）；
var stopLeft=（Stoppos.left）；
var stopRight=（stopLeft+$（“#拆分器”）.outerWidth（）；
$（“#停止”）.text（“停止：\nLeft:+stopLeft+”\nTop:+stopRight）；
$（“#索引”）.css（{“宽度”：stopLeft}）；
$（“#拆分器”）.css（{“left”：stopLeft}）；
$（“#content”）.css（{“width”：（$（“#container”）.outerWidth（）-stopRight），“left”：stopRight}）；
}
});
});

Css

<style>
    #container
    {
        width:1200px;
        height:600px;
        position:relative;
    }

    #index
    {
        width:200px;
        height:600px;
        position:absolute;
        left:0;
        background-color:#dedede;
    }

    #splitter
    {
        width:5px;
        height:600px;
        cursor:w-resize;
        position:absolute;
        left:200px;
        background-color:#fff;
        z-index:1;
    }

    #content
    {
        width:995px;
        height:600px;
        position:absolute;
        left:205px;
        background-color:#d1d1d1;
    }
</style>

#容器
{
宽度：1200px；
高度：600px；
位置：相对位置；
}
#索引
{
宽度：200px；
高度：600px；
位置：绝对位置；
左：0；
背景色：#dedede；
}
#分离器
{
宽度：5px；
高度：600px；
光标：w-调整大小；
位置：绝对位置；
左：200px；
背景色：#fff；
z指数：1；
}
#内容
{
宽度：995px；
高度：600px；
位置：绝对位置；
左：205px；
背景色：#d1d1；
}

Html

<div id="start"></div>
<div id="stop"></div>
<div id="container">
    <div id="index"></div>
    <div id="splitter"></div>
    <div id="content"></div>
</div>

<style>
    #container
    {
        width:1200px;
        height:600px;
        position:relative;
    }

    #index
    {
        width:200px;
        height:600px;
        position:absolute;
        left:0;
        background-color:#dedede;
    }

    #splitter
    {
        width:5px;
        height:600px;
        cursor:w-resize;
        position:absolute;
        left:200px;
        background-color:#fff;
        z-index:1;
    }

    #content
    {
        width:995px;
        height:600px;
        position:absolute;
        left:205px;
        background-color:#d1d1d1;
    }
</style>

<div id="start"></div>
<div id="stop"></div>
<div id="container">
    <div id="index"></div>
    <div id="splitter"></div>
    <div id="content"></div>
</div>