Question

我在这里的其他一个问题中找到了这段代码。这正是我正在寻找的东西（可拖动并且根据最后点击的那个整齐地堆叠div）除了我还希望div id可以调整大小但我无法弄清楚如何在不弄乱代码的情况下执行此操作

$(document).ready(function() {
    var a = 3;
    $('#box1,#box2,#box3,#box4').draggable({
        start: function(event, ui) { $(this).css("z-index", a++); }
    });
    $('#dragZone div').click(function() {
        $(this).addClass('top').removeClass('bottom');
        $(this).siblings().removeClass('top').addClass('bottom');
        $(this).css("z-index", a++);

    });
});

Answer 1

只需致电.resizable()，即可调整大小。

$('#box1,#box2,#box3,#box4').draggable({
   start: function(event, ui) { $(this).css("z-index", a++); }
}).resizable();

您没有看到它的原因：在jsFiddle中，jQuery UI包含在没有主题的情况下。如果您检查这些框，您可以看到它们具有ui-resizable类，并且还具有调整大小句柄，如下所示：

<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; "></div>

，但它们根本没有风格。它们是看不见的。如果你给它们尺寸，你就可以拖动它们并调整大小。

这是simple demo，显示了我正在谈论的内容。

这些是我改变的事情：

将.ui-resizable-se { width: 20px; height: 20px; background: cyan; position: absolute; bottom: 0; right: 0; }添加到CSS中，这将设置 s outh- e ast处理程序的样式。
添加了.resizable()来电
将此选择器：'#dragZone div'更改为'#dragZone > div'，因此它不会弄乱处理程序，只会应用于真实的框，而不是区域中的每个div

为div提供.resizable

1 个答案: