Javascript / jQuery拖放限制父级

时间:2014-07-24 11:46:56

标签: javascript jquery drag-and-drop limit

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

应该是这样的:

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/

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:1)

如果您想根据其父级获取排名,请使用.position(),然后检查xPosyPos是否大于0且小于其父级' 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中存在拼写错误。