Javascript/jQuery 拖放限制父级

Question

遇到以下问题。
我需要以下内容才能在绿色区域中拖放。

应该是这样的:

limit($(this).parent());

但这不起作用，我用它来打扰:

$('#dragThis').draggable({
drag: function () {

    var offset = $(this).offset();
    var xPos = Math.abs(offset.left);
    var yPos = Math.abs(offset.top);
    $('#posX').val('x: ' + xPos);
    $('#posY').val('y: ' + yPos);
},
stop: function (event, ui) {

    // Show dropped position.
    var Stoppos = $(this).position();
    var left = Math.abs(Stoppos.left);
    var top = Math.abs(Stoppos.top);
    $('#posX').val('x: ' + left);
    $('#posY').val('y: ' + top);
}

});

希望有人能帮助我；)谢谢到目前为止

http://jsfiddle.net/DGbT3/1850/

///////////////
更新 - 获取正确的 x/y 位置并仅允许在绿色区域内:
http://jsfiddle.net/DGbT3/1858/

Answer 1

您可以使用containment此选项将拖动限制在指定元素或区域的范围内。:

$('#dragThis').draggable({
    drag: function() {
        var offset = $(this).offset();
        var xPos = Math.abs(offset.left);
        var yPos = Math.abs(offset.top);
        $('#posX').val('x: ' + xPos);
        $('#posY').val('y: ' + yPos);
    },
    stop: function(event, ui) {
        // Show dropped position.
        var Stoppos = $(this).position();
        var left = Math.abs(Stoppos.left);
        var top = Math.abs(Stoppos.top);
        $('#posX').val('x: ' + left);
        $('#posY').val('y: ' + top);
        $('#info').val('x: ' + left + ' y: ' + top);
    },
    containment: $("#content")
});

Example