jquery拖动的元素不会停留在其放置的位置

jquery dragged element does not stay where it is dropped

本文关键字：停留在位置拖动元素 jquery 更新时间：2023-09-26

尝试查看以下jsFiddle

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

当我拖动"splitter"元素时，它不会停留在原地。

我在这里错过了什么？

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

我找到了一个解决方案，将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>

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>