Question

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

应该是这样的：

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

但那不起作用，我正在使用这个dnd：

$('#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

Answer 2

如果您想根据其父级获取排名，请使用.position()，然后检查xPos和yPos是否大于0且小于其父级＆＃39; s宽度..

$('#dragThis').draggable({
    drag: function() {
        var offset = $(this).position();
        var xPos = offset.left;
        var yPos = offset.top;
        $('#posX').val('x: ' + xPos);
        $('#posY').val('y: ' + yPos);
        if(xPos < 0 || xPos > $(this).parent().width())
            console.log("outside");
    },
    stop: function(event, ui) {
        // Show dropped position.
        var Stoppos = $(this).position();
        var left = Stoppos.left;
        var top = Stoppos.top;
        $('#posX').val('left: ' + left);
        $('#posY').val('top: ' + top);
        if(xPos < 0 || xPos > $(this).parent().width())
            console.log("outside");
    }
});

注意：#content css position中存在拼写错误。

Javascript / jQuery拖放限制父级

2 个答案:

Example