Javascript I'；我对jQueryUI的大小进行了调整。我想在4个相等的间隔内减少和增加宽度

我对jquery resize有一个问题。这是plunkr代码。我希望在可拖放页面的4个相等间隔内增加和减少拖放元素的宽度。我正在尝试使用if-else条件来获得此功能，但我无法做到。我是jquery新手，如有任何帮助，将不胜感激

$（文档）.ready（函数（）{
$（函数（）{
$（“ul li”）。每个（函数（）{
$（此）。可拖动({
助手：“克隆”，
回复：“无效”
});
});
$（“.day”）.可拖放({
接受：“：非（.ui可排序帮助程序）”，
drop：函数（事件、用户界面）{
变量padLeft、padRight、padTotal；
$（ui.draggable）.clone（）.find（'#draggable'）。可调整大小({
最小宽度：60，
鬼：是的，
句柄：'e'，
调整大小：函数（事件、ui）{
调试器；
ui.size.width=ui.size.width+200；
如果（ui.size.width>800）{
ui.size.width=800；
}
如果（ui.size.height<90）{
ui.size.height=90；
}
如果（ui.size.width<400&&ui.size.width>204）{
ui.size.width=200；
}
},
开始：函数（事件，ui）{}，
停止：函数（事件，ui）{}
}).附于（本）；
}
}).可排序({
占位符：“ui状态突出显示”
});
});
});

因此，查看代码时，您的宽度为

200px

，高度为

90px

，并且您希望能够在删除后调整其宽度，但只能以

200

的倍数调整，直到它们达到最大宽度

800

。为此，您可以使用

minWidth

、

maxWidth

和

grid

选项

$(ui.draggable).clone().find('#drag').resizable({
    minWidth: 200,
    maxWidth: 800,
    ghost: true,
    handles: 'e',
    grid: [200, 90],
    start: function(event, ui) {
    },
    stop: function(event, ui) {
    }
});

最大值和最小值可能很明显，但您可以在此处阅读有关

网格

选项的更多信息：

每x和y像素将调整大小的元素捕捉到栅格。排列 值：[x，y]

我还看到在HTML中有多个div具有相同的id

drag

。ID应该是唯一的，仅供将来参考。相反，为他们提供唯一的ID和一个公共类，并在

查找中使用该类

HTML:

是否有任何方法可以将可拖放页面划分为4个相等的列，以便在每次尝试调整拖放元素的宽度时调整每列的宽度。我不确定我是否完全理解您想要的内容。这个网站有我正在尝试实现的功能。我们有一个选项，叫做将列设置为4、3、2、1。如果我们设置了4列，那么对于下垂的元素，页面有4个可变宽度。如果设置为3，则具有3个可变高度。
$(ui.draggable).clone().find('#drag').resizable({
    minWidth: 200,
    maxWidth: 800,
    ghost: true,
    handles: 'e',
    grid: [200, 90],
    start: function(event, ui) {
    },
    stop: function(event, ui) {
    }
});

<ul id="sortable">
    <li class="input">
        <div style="background-color:darksalmon" class="draggableItem" id="drag1">Input</div>
    </li>
    <li>
        <div style="background-color:moccasin;" class="draggableItem" id="drag2">Textarea</div>
    </li>
    <li class="dropdown">
        <div style="background-color:saddlebrown;" class="draggableItem" id="drag3">Dropdown</div>
    </li>
    <li class="checkbox">
        <div style="background-color:plum" class="draggableItem" id="drag4">checkbox</div>
    </li>
</ul>

$(ui.draggable).clone().find('.draggableItem').resizable({