的jQuery拖動的元素並不留在它被丟棄

Question

嘗試看看下面的jsfiddle

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

當我拖動的「分流」元素不會停留在原地。

我在這裏錯過了什麼？

的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

我找到了解決方法，通過改變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>