jQueryUI：限制拖放元素的容器高度

Posted 2023-05-08

【中文标题】jQueryUI：限制拖放元素的容器高度

【英文标题】：jQueryUI: restrict container height on drag and drop element

【发布时间】：2018-06-06 14:40:42

【问题描述】：

我已经使用 jquery UI 实现了拖放功能。

这里是它的 js fiddle (http://jsfiddle.net/metm0v0f/)。

当我将一个 div 从一个 div 拖放到另一个 div 时，我想限制高度增加。我试图限制 css 类：

overflow-x: hidden;
overflow-y: hidden;

但它仍在增加高度。谁能帮我固定容器尺寸？

【问题讨论】：

看起来你在 jsfiddle 中的拖放功能不起作用。

可以使用max-height和overflow-y来限制高度

@Mr.x 刚刚测试过，我可以轻松拖放

@cdoshi，仍然没有限制。 jsfiddle.net/metm0v0f/7

在 .dbContainer1、.dbContainer2、.dbContainer3 块下插入最大高度条件

【参考方案1】：

只需将这两行添加到 dbContainer1,dbContainer2 类中：

.dbContainer1 
    width: 40%;
    float: left;
    border: dotted 1px red;
    /*add the following lines*/
    height:250px;
    overflow-y:scroll;

.dbContainer2 
    width: 40%;
    float: left;
    border: dotted 1px green;
    /*add the following lines*/
    height:250px;
    overflow-y:scroll;