2

I found this code in one of the other questions on here. It's exactly what i'm looking for (draggable and it neatly stacks the divs based on which one was clicked last) except I also want the div ids to be resizable but I can't figure out how to do it without messing the code up.

http://jsfiddle.net/LQ4JT/7/

$(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++);

    });
});​
4

1 回答 1

3

只需调用.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>

，但它们根本没有样式。它们是不可见的。如果您给它们提供尺寸，您将能够拖动它们并调整框的大小。

这是一个简单的演示，显示了我在说什么。

这些是我改变的东西：

  • 添加.ui-resizable-se { width: 20px; height: 20px; background: cyan; position: absolute; bottom: 0; right: 0; }到 CSS 中，这将为外部处理程序设置样式。

  • 添加了.resizable()通话

  • 更改了这个选择器：'#dragZone div'这样'#dragZone > div'它就不会弄乱处理程序，并且只应用于真正的盒子，而不是区域中的每个 div

于 2012-05-07T09:37:43.823 回答