在表格內部包含一個可拖動的div

Question

我正在使用jqueryUI可拖動插件。我已經能夠很容易地設置它。現在我有一個基本的表格，我把可拖動的div放在裏面。我將如何能夠將可拖動的div保存在<td id=」 middle-side」></td>內？換句話說保持DIV中，使只可拖動裏面<td id=」 middle-side」></td>JSFIDDLE

HTML

<table style="width: 95%; height: 600px;"> 
     <tr> 
      <td colspan="3"> 
       <h1 class="someTitle"></h1> 
      </td> 
     </tr> 
     <tr> 
      <td class="left-side"></td> 
      <td class="middle-side"> 
       Keep me inside here! 
        <div id="draggable" class="ui-widget-content"> 
         <p><b>Drag me around</b></p> 
        </div> 

      </td> 
      <td style="border: 2px solid;"> 
        <ul> 
         <li></li> 
        </ul> 
      </td> 
     </tr> 
     <tr style="height: 50%;"> 
      <td class="bottom-side" colspan="3"></td> 
     </tr> 
    </table> 

jQuery的

$(function() { 
    $("#draggable").draggable(); 
}); 

Answer 1

直接從文檔：containment

$("#draggable").draggable({ containment: "parent" }); 

Answer 2

只需添加{在y中包含：「parent」}我們的可拖動功能

$(function() { 
    $("#draggable").draggable({ containment: "parent" }); 
});