Jquery可拖动不使用收容

时间:2013-11-07 11:53:39

标签: jquery css jquery-ui draggable containment

我的应用程序包含具有绝对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/

我找不到问题所在。有谁能建议我解决方案?

1 个答案:

答案 0 :(得分:1)

只需要取消所有正在进行的边际重置。简单地说你的jQuery:

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

DEMO http://jsfiddle.net/2TpPS/3/

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