Jquery可拖动不适用于约束内容。

Question

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

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/ 我找不到问题所在。有人能给我提供一个解决方案吗？

- Dhivi

---

为什么需要重新设置 left 和 margin？如果元素已经被拖动，为什么在放置时还需要再次移动它？ - Rory McCrossan

@RoryMcCrossan：我正在创建一个类似甘特图的应用程序。每个段落都是绝对定位的，基于它们的margin-left值进行日期计算。在可拖动时，段落的位置变为相对位置，并且它附加了left属性而不是margin-left，因此计算不完美。是否有一种方法可以解决这种情况，就像我在fiddle中所做的那样？ - Dhivi

Answer 1

只需去除您正在执行的所有不必要的边距重置。 您的jQuery应为：

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

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

如果您希望可以在任何方向上拖动盒子，则删除axis: "x"。

- tomsullivan1989

---

是的，当我尝试时它有效。你能参考一下我上面的帖子评论来解释这种情况吗？ - Dhivi