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

我有一个图像，我想使其可拖动和调整大小：

我正在试验三条线：

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

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

显然，可调整大小和可拖动远远不是相互独立的。有人能解释一下这是怎么回事吗

---

谢谢

1:可调整大小的小部件使用css属性创建包装器div

溢出：隐藏

2:正在通过更改：top和left属性来移动拖动表

3：场景：

3.1当您首先初始化可调整大小的文件，然后初始化可拖动文件时，可拖动文件将获得相对于可调整大小文件创建的包装的

位置：relative

。（并将被困在可调整大小文件创建的包装中）

3.2当您首先初始化拖动表，然后初始化可调整大小时，拖动表将获得

位置：static

。如果您在chrome中使用dev工具并移动DragTable，您将看到顶部和左侧的属性都发生了更改，但是DragTable with property

position:static

将保留在可调整大小的组件创建的包装中（并且视觉上保持在同一位置）

---

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

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

溢出：隐藏

2:正在通过更改：top和left属性来移动拖动表

3：场景：

3.1当您首先初始化可调整大小的文件，然后初始化可拖动文件时，可拖动文件将获得相对于可调整大小文件创建的包装的

位置：relative

。（并将被困在可调整大小文件创建的包装中）

3.2当您首先初始化拖动表，然后初始化可调整大小时，拖动表将获得

位置：static

。如果您在chrome中使用dev工具并移动DragTable，您将看到顶部和左侧的属性都发生了更改，但是DragTable with property

position:static

将保留在可调整大小的组件创建的包装中（并且视觉上保持在同一位置）

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

jQuery UI的。resizable（）通过在元素周围添加一个UI包装div，该div最初与元素大小相同，并将元素设置为填充高度和宽度，使元素的大小可以调整。使元素可拖动只允许在ui包装器div中拖动它

如果希望能够拖动和调整大小，请首先应用

.resizeable（）

，然后通过在元素上调用

.parent（）.draggable（）

使包装器可拖动

$('#clown').resizable(); //adds a new parent to #clown
$('#clown').parent().draggable();  //makes the new parent draggable

jQuery UI的.resizeable（）通过在元素周围添加一个最初与元素大小相同的UI包装div，并将元素设置为填充高度和宽度，来调整元素的大小。使元素可拖动只允许在ui包装器div中拖动它

如果希望能够拖动和调整大小，请首先应用

.resizeable（）

，然后通过在元素上调用

.parent（）.draggable（）

使包装器可拖动

$('#clown').resizable(); //adds a new parent to #clown
$('#clown').parent().draggable();  //makes the new parent draggable