0

我在http://jsfiddle.net/3GWL2/2/有一张图片，我想让它可拖动和调整大小：

我正在尝试三行：

1. //$('#clown').draggable();
2. //$('#clown').draggable().resizable();
3. //$('#clown').resizable().draggable();

如果我只取消注释第 1 行，则图像可以很好地拖动。如果我只取消注释第 2 行，图像可调整大小但不可拖动。如果我只取消注释第 3 行，则图像是可拖动的，但只能在原始大小范围内，并且图像可以调整大小。

显然，可调整大小和可拖动远非彼此独立。有人可以解释这里发生了什么吗？

谢谢

4

2 回答 2

2

jQuery UI 的 .resizable() 通过在您的元素周围添加一个最初与您的元素大小相同的 ui-wrapper div 并设置您的元素以填充高度和宽度，从而使您的元素可调整大小。使您的元素可拖动只允许它在 ui-wrapper div 中拖动。

如果您希望能够拖动和调整大小，请先应用，然后通过调用您的元素.resizable()使包装器可拖动。.parent().draggable()

$('#clown').resizable(); //adds a new parent to #clown
$('#clown').parent().draggable();  //makes the new parent draggable
于 2013-06-25T23:37:04.900 回答
1

1：可调整大小的小部件创建一个带有 css 属性的包装器 divoverflow:hidden

2：通过更改：top 和 left 属性来移动可拖动对象。

3：场景：

3.1 当你第一次初始化 resizable 然后 draggable 时，draggable 将得到position:relative，相对于 resizable 创建的包装器。（并且会被困在 resizable 创建的包装器内）。

3.2 当你第一次初始化draggable 然后resizable 时，draggable 会得到position:static. 如果您在 chrome 中使用开发工具并移动可拖动对象，您将看到顶部和左侧属性已更改，但可拖动对象的属性position:static将保留在由可调整大小创建的包装器内（并且视觉上保持在同一位置）。

4：这实际上是一个很酷的问题，因为我从未真正深入研究小部件的内部工作原理以及它们如何与 css 交互。谢谢你，现在我无法入睡，直到我想出来:)

于 2013-06-25T23:33:43.040 回答