通过拖动节点动态调整DIV大小 [英] Dynamically Resize DIV by Dragging Nodes

问题描述

http://jsbin.com/ovODORove/1/edit

我相信你们已经看到了拖动节点并调整元素大小的设计应用程序。好吧昨晚，今天我决定尝试一下。

I'm sure you've all seen those design applications where you drag a node and it resizes the element. Well last night, and today I decided to give it a try.

所以今天我想尝试动态调整div的大小，我有点困惑。

So today I wanted to try dynamically resizing a div, and I'm a bit confused.

我尝试了各种方法，但似乎都没有。

I tried various ways, but none seem to work.

逻辑上我知道通过使用JQuery UI我可以设置我的类.EE（东东）可拖动以使其水平拖动元素，但是当拖动元素时，我希望它也将宽度设置为它的位置。我假设通过将可拖动事件绑定到元素css width可以工作，但是当我尝试它时它不起作用。

Logically I know that by using JQuery UI I can set my class .EE (for east east) to draggable to make it drag the element horizontally, but while the element is being dragged I want it to also set the width to where it's position is. I assume by binding the draggable event to the elements css width would work, but when I tried that it didn't work.

如果有人可以帮助我解决这个问题非常感谢。

If anyone can help assist me with this it'd be greatly appreciated.

编辑：

使用JQuery UI的可调整大小的处理程序使这成为一个真正简单的解决方案可以在这里看到 。
ThreeDubMedia 也有一个很好的插件，可以启用此功能。如此处所示。

EDIT:
Using JQuery UI's resizable handlers make this a real easy solution as you can see here. ThreeDubMedia also has a nice plugin that enables this functionality as well. As seen here.

推荐答案

我玩了一下，我已经开始工作了。这对你来说可能不是完全，但我认为这是一个非常好的起点。
我为每个句柄分配了相同的停止回调，并控制任何方向的大小调整。另外你应该给 width（）和 height（）一个参数，就像Man of Snow说的那样。

I played with it a bit, and I've got it working. This may be not exactly right for you, but I think it's a pretty good starting point. I've assigned the same stop callback for every handle, and that controls the resizing in any direction. Also you should give a parameter to width() and height(), like Man of Snow said.

这是小提琴。

这篇关于通过拖动节点动态调整DIV大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！