jQuery可拖动appendTo不起作用答案

【问题标题】：jQuery draggable appendTo doesn't workjQuery可拖动appendTo不起作用
【发布时间】：2013-04-04 12:57:58
【问题描述】：

以下代码：

jQuery

    $('.dragBox').draggable({ 
        axis: 'y',
        appendTo: 'parent',
        containment: [0,0,0,150],
        start: function() {
            $(this).addClass('grabbing');
        },
        stop: function() {
            $(this).removeClass('grabbing');
        }
    });

HTML

<div class="container">
    <div class="cropBox"><div class="dragBox"></div></div>
</div>

但 .dragBox 不会附加到 .cropBox。内盒的 y 轴不是从 0 开始，而是从 -117 开始。 117 是 .cropBox 和窗口上边缘之间的像素距离。

编辑

我修好了

startDrag();

$(window).resize(function(){
    startDrag();
});
function startDrag(){
    var xAxis = $('.dragBox').outerWidth() - $('.cropBox img').outerWidth();
    var yAxis = $('.dragBox').outerHeight() - $('.cropBox img').outerHeight();
    var x1 = $('.dragBox').position().left;
    var y1 = $('.dragBox').position().top;
    if( $('.dragBox img').outerWidth() > $('.dragBox img').outerHeight() ) {
        var axis = 'x';
        var containment = [xAxis+x1,0,x1,0];
    } else {
        var axis = 'y';
        var containment = [0,yAxis+y1,0,y1];
    }

    $('.dragBox img').draggable({ 
        axis: axis,
        appendTo: 'parent',
        containment: containment,
        start: function() {
            $(this).addClass('grabbing');
        },
        stop: function() {
            $(this).removeClass('grabbing');
        }
    }); 
}

感谢回复！

【问题讨论】：

你试过 appendTo('.cropBox')
如果我没记错的话，appenTo 选项仅适用于助手，与可拖动元素本身无关。是的，我想我也遇到了同样的问题，就是助手的位置不对。
@blachawk 是的，我已经尝试过了。
@ggzone hm 这是一个代码示例：jsfiddle.net/tTJd4
我编辑了你的小提琴jsfiddle.net/tTJd4/1，将容器从 100 更改为 80，因为问题似乎是负最大值 -20 像素。那是你的问题吗？

标签： jquery html css draggable

【解决方案1】：

据我了解您的帖子，您正在寻找：

 $('.dragBox').draggable({ 
    axis: 'y',
    containment: 'parent',
    start: function() {
        $(this).addClass('grabbing');
    },
    stop: function() {
        $(this).removeClass('grabbing');
    }
});

【讨论】：