jquery dragged element does not stay where it is dropped

Question

Try to see the following jsFiddle

http://jsfiddle.net/TtSub/1/

When i drag the "splitter" element it does not stay in place.

What am I missing here?

Html

<div id="start"></div>
<div id="stop"></div>
<div id="container">
    <div id="index" class="float"></div>
    <div id="splitter" class="float">&nbsp;</div>
    <div id="content" class="float"></div>
</div>

Css

#container
{
    width:600px;
    height:400px;
}

#index
{
    width:200px;
    height:400px;
    background-color:#dedede;
}

#splitter
{
    width:5px;
    height:400px;
    cursor:w-resize;
    background-color:#fff;
}

#content
{
    width:395px;
    height:400px;
    background-color:#d1d1d1;
}

.float
{
    float:left;
}

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) });
        }
    });
});

Answer 1

I found a solution, by changing css to absolute position and change html and javascript a little

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>

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>

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>