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 开箱即用，但可向左拖动不起作用。

fiddle :http://jsfiddle.net/2TpPS/

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

Answer 1

只需删除您正在执行的所有不必要的边距重置。让你的 jQuery 简单:

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

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

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