Question

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

我正在试验三行：

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

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

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

由于

Answer 1

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

Answer 2

1：可调整大小的小部件使用css属性overflow:hidden

创建包装器div

2：通过更改：top和left属性来移动draggable。

3：场景：

3.1当您第一次初始化可调整大小然后可拖动时，相对于可调整大小创建的包装器，draggable将获得position:relative（并且将被捕获在可调整大小创建的包装器内）。

3.2首次初始化draggable然后再调整大小时，draggable将获得position:static。如果您在chrome中使用dev工具并移动draggable，您将看到顶部和左侧属性已更改，但是具有属性position:static的draggable将保留在可调整大小创建的包装器内（并且可视地保持在同一位置）。

4：这实际上是一个很酷的问题，因为我从未真正深入研究过小部件的内部工作方式以及它们如何与css交互。谢谢你，现在我无法入睡，直到我弄明白：）

无法链接可拖动和可调整大小

2 个答案: