Jquery draggable() 阻止 CSS 调整大小工作答案

【问题标题】：Jquery draggable() prevents CSS resize from workingJquery draggable() 阻止 CSS 调整大小工作
【发布时间】：2018-11-13 16:48:02
【问题描述】：

如果可能，我想使用 JQuery 的 draggable() 和 CSS 的 resize。但是draggable() 显然阻止了resize 工作。演示：http://jsfiddle.net/zHkQB/123/。有想法该怎么解决这个吗？我会使用 JQuery 的 resizable()，但这也不起作用。

【问题讨论】：

使用 jQueryUI resizable() 代替：jsfiddle.net/zHkQB/124
我会的，但在我的情况下也不行。
检查您的控制台是否有错误，因为您可以看到它在您提供的小提琴中运行良好。

标签： jquery css resize draggable

【解决方案1】：

将 resizable() 添加到您的 jQuery 中：

$("#dragResize").resizable().draggable()

【讨论】：

【解决方案2】：

具体来说，您需要将resizable() 添加到您的代码中，并删除允许调整元素大小的CSS 调用。我在这里更新了小提琴：

http://jsfiddle.net/r3kbjwgq/1/

您的问题是 jQuery resizable() 与您的 CSS resize:both 调用冲突，因为当您单击 CSS 创建的调整大小句柄时，您正在与元素进行交互。让 jQuery 创建调整大小句柄：

$('#the-thing').resizable({
    handles: 'se'
});

您让 jQuery 创建一个新的调整大小句柄作为单独的元素，允许调整大小和拖动元素。

【讨论】：