可拖动的 Jquery 不适用于包含

Question

我的应用程序包含所有具有绝对 css 位置属性的 div。由于 draggable 采用相对位置，我需要用 margin-left 覆盖它并计算拖动 div 的左值。如果不指定包含，它可以正常工作，

http://jsfiddle.net/W42A4/

<div id="main"><div id="draggable">Drag me</div></div>

$( "#draggable" ).draggable({
    axis:"x",
    containment: "#main",
    stop: function( e, ui ) {
        var el = $(this);
        var newLeft = $(el).css("left");
        var newmarginLeft = $(el).css("marginLeft");
        var totalmarginShift = parseFloat(newLeft) + parseFloat(newmarginLeft);
        el
            .css("marginLeft", totalmarginShift)
            .css("left", "")
            .css("top", "")
            .css("position", "absolute");       
    }
});

我需要遏制以限制可拖动的 div 移动到盒子外，但可拖动的左侧不起作用。

小提琴：http://jsfiddle.net/2TpPS/

我找不到问题所在。谁能给我一个解决方案？

Answer 1

只需取消您正在执行的所有不必要的边距重置。简单地拥有你的 jQuery：

$("#draggable").draggable({
    axis: "x",
    containment: "#main"
});

演示：http://jsfiddle.net/2TpPS/3/

如果您希望该框能够向任何方向拖动，请删除axis: "x"。