Question

我正忙于时间表脚本，因为我需要使用jQuery draggable和resizeable。但是你可以在te jsFiddle中看到draggable有一个父级，但是你可以将它拖动到父级，每次点击一下10px。编辑：我需要的是它不能被拖到容器外面。谁可以提供帮助

http://jsfiddle.net/QBX2B/1/

HTML：

        <div class="containment" style="display:block; height:40px; width:150px; background-color:#f2f2f2;">
        <div class="baldie" style="display:block; height:40px; width:150px; background-color: rgba(214, 255, 210, .7);"/>
    </div>

jquery的：

                $('.baldie').resizable({
                        containment: "parent",

                    }).draggable({
                        grid: [5,0],
                        containment:"parent",
                        drag: function( event, ui ) {

                        }
                    });

Answer 1

向容器添加position:relative;可以解决问题。

我修改了您的代码检查运行，您可以检查它： -

<div class="containment" style="position: relative; display:block; height:40px; width:150px; background-color:#f2f2f2;">
            <div class="baldie" style="display:block; height:40px; width:150px; background-color: rgba(214, 255, 210, .7);"/>
        </div>

检查： -

Jquery UI resizable issue expands beyond containment (draggable also used)

Answer 2

内联样式不是好习惯。它导致混乱，有时难以读取代码。使用CSS修改父级的边距和填充，我们可以允许孩子覆盖整个父级。 JSFiddle Solution

.baldie{
  display:block; 
    height:40px; 
    width:150px; 
    background-color: rgba(214, 255, 210, .7); 
    margin:1px;
}
.containment{
    position:relative;
    display:block; 
    height:40px; 
    width:150px; 
    background-color:#f2f2f2;
}

带有遏制的可移动和可调整大小的div消失了

2 个答案: