在表格中包含一个可拖动的div

Question

我正在使用jqueryUI draggable插件。我已经能够轻松设置它。现在我有一个基本表，我把可拖动的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

只需在您的可拖动功能中添加{containment：“parent”}

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