可拖动的 Jquery 不适用于包含

Posted 2023-05-08

【中文标题】可拖动的 Jquery 不适用于包含

【英文标题】：Jquery draggable not working with containment

【发布时间】：2013-11-19 01:21:41

【问题描述】：

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

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

【问题讨论】：

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

@RoryMcCrossan：我正在创建类似于甘特图的应用程序。每个段都是绝对位置，并根据它们的边距左值执行日期计算。在可拖动时，段的位置变为相对并附加left 属性而不是margin-left，因此计算不能完美运行。有没有办法解决我在小提琴中所做的这种情况？

【参考方案1】：

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

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

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

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

【讨论】：

是的，当我尝试过时这也有效..你能参考我上面的帖子评论来解释这个场景吗..