4

我正忙于一个时间表脚本，为此我需要使用 jQuery 可拖动和可调整大小。但是您是否可以在 te jsFiddle 中看到可拖动对象有一个父对象，但是您可以在每次单击时将其拖动到父对象上方 10 像素。编辑：我需要的是它不能被拖到容器外。谁能帮忙

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 ) {

                        }
                    });
4

2 回答 2

2

将 a 添加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 可调整大小问题超出了包含范围（也使用了可拖动）

于 2013-05-16T12:09:37.223 回答
0

内联样式不是好的做法。它会导致代码混乱，有时难以阅读。使用 CSS 修改 parent 的 margin 和 padding 我们可以让 child 覆盖整个 parent。 JSFiddle 解决方案

.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;
}
于 2013-05-16T12:22:04.873 回答