javascript - 我遇到了可调整大小的 jquery ui 问题。我想以 4 个相等的间隔减少和增加宽度

Question

我遇到了 jquery 调整大小的问题。这是 plunkr 代码。我想在可放置页面的 4 个相等间隔内增加和减少放置元素的宽度。我正在尝试使用 if else 条件来获得此功能，但我无法做到这一点。我是 jquery 的新手，我们将不胜感激。 http://plnkr.co/edit/E9SRGrLIfKOWiLg4BYeS?p=preview

$(document).ready(function() {
    $(function() {
        $("ul li").each(function() {
            $(this).draggable({
                helper: "clone",
                revert: "invalid"
            });
        });
        $(".day").droppable({
            accept: ":not(.ui-sortable-helper)",
            drop: function(event, ui) {
                var padLeft, padRight, padTotal;
                $(ui.draggable).clone().find('#drag').resizable({
                    minWidth: 60,
                    ghost: true,
                    handles: 'e',
                    resize: function(event, ui) {
                        debugger;
                        ui.size.width = ui.size.width + 200;
                        if (ui.size.width > 800) {
                            ui.size.width = 800;
                        }
                        if (ui.size.height < 90) {
                            ui.size.height = 90;
                        }
                        if (ui.size.width < 400 && ui.size.width > 204) {
                            ui.size.width = 200;
                        }
                    },
                    start: function(event, ui) {},
                    stop: function(event, ui) {}
                }).appendTo(this);
            }
        }).sortable({
            placeholder: "ui-state-highlight"
        });
    });
});

Answer 1

从代码中可以看出，您的宽度为 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) {
    }
});

最大值和最小值可能很明显，但您可以在此处阅读有关 grid 选项的更多信息:

http://api.jqueryui.com/resizable/#option-grid

Snaps the resizing element to a grid, every x and y pixels. Array values: [ x, y ].

我还看到您的 HTML 中有多个具有相同 ID 的 drag 的 div。 ID 应该是唯一的，仅供将来引用。而是给他们唯一的 ID 和一个通用类，然后在您的查找中使用该类。

HTML:

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

JS:

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