jquery - 设置可拖动元素的边界

我有一个由jquery动态生成的可拖动元素。我在div中有一个背景图像。如何绑定元素，使其永远不会超出div？
这是代码：jsfiddle.net。

$(document).ready(function () {
    $("button").click(function () {
        $("#currentimage").append('<img id="dragable" src="http://s25.postimg.org/pi8ruls3z/image.jpg" width="200px" height="auto" />');
        $("#dragable").draggable();
    });
});

最佳答案

您可以添加containment: 'parent'。此外，还必须添加类dragable而不是id。id必须是唯一的。以便您可以多次单击该按钮。
尝试：

$(document).ready(function () {
    $("button").click(function () {
        $("#currentimage").append('<img class="dragable" src="http://s25.postimg.org/pi8ruls3z/image.jpg" width="200px" height="auto" />');
        $(".dragable").draggable({
        containment: 'parent'
        });
    });
});

DEMO