jquery resizable() 不工作（示例）答案

【问题标题】：jquery resizable() not working (with example)jquery resizable() 不工作（示例）
【发布时间】：2016-04-25 07:12:55
【问题描述】：

请查看正在进行的工作：

http://rawgit.com/jfix/cover-image-position/master/index.html

我的目标是允许从桌面拖放到此页面上，然后拖动图像并调整其大小。您应该能够将图像拖放到页面上并拖动它。

但是，无法调整图像大小。图像周围的框架上没有显示句柄，并且无法调整其大小。控制台中没有错误。

相关代码在这里：

hdl.resizable({
    aspectRatio: true,
    autoHide: true,
    alsoResize: "#coverimage",
    handles: 'all',
    resize: function(event, ui) {
    cvr
        .css('left', ui.position.left)
        .css('top', ui.position.top);
    }
});

其中hdl 是assets/script.js 文件中$('#handler') 的缩写形式。我应该注意到，这几乎是从这个 jsfiddle 中逐字复制的：http://jsfiddle.net/nL5ew/ 显然可以正常工作。

我似乎找不到我的代码的问题。感谢您提供任何敏锐的见解。

【问题讨论】：

在您的页面上不知何故您提到的代码没有运行...
@RRR 如果您的意思是页面上没有正常和预期的图像（覆盖除外），您必须将图像从桌面拖放到它上面。如果这就是您所说的“不运行”的意思。
我的意思是你的脚本中的一些函数没有被识别......可能与 jQuery 或 jQuery UI 的版本有关......我试图通过复制你的代码和它来重新创建 jsfiddle 中的场景在 jQuery 版本 1.9.1 和 jQuery UI 1.9.2 上运行良好 :) 你可以在这里查看演示 jsfiddle.net/x3tbre8p
注意：我没有更改任何 HTML、CSS 或 jQuery，只是更改了 jQuery 和 jQuery UI 的版本 :)
@RRR 太好了，我会将库降级为您指定的库，祈祷...谢谢！

标签： javascript jquery resizable jquery-ui-resizable

【解决方案1】：

检查了@RRR 的 JSFiddle，并将其与我的代码逐行进行比较，我最终发现我没有包含一个，事实证明，这是来自 JQuery UI 套件的重要 CSS 文件。这是缺少的行：

<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

平心而论，@RRR 提供了正确的解决方案，不幸的是，它不是在一个完整的答案中，而只是在评论中。

【讨论】：

【解决方案2】：

使用此语法以获得更好的结果：

 $(selector, context).resizable({option1: value1, option2: value2..... });

【讨论】：

@Valsal，你能详细说明这会改变什么吗？我可以看到您在选择器旁边添加了一个 context 参数。我应该用它做什么？