保存 html 文件后，jqueryUI resizable 不起作用答案

【问题标题】：After saving html file, jqueryUI resizable doesn't work保存 html 文件后，jqueryUI resizable 不起作用
【发布时间】：2014-05-22 01:35:02
【问题描述】：

我的页面有一个按钮。单击它后，将在页面上的某个区域添加一个框。此框可拖动并可调整大小。一切正常。然后，我将我的 html 页面保存到我的计算机上。我打开保存的文件。但是现在，尽管该框仍然是可拖动的，但它不再可调整大小。那就是问题所在。为什么会这样？我该如何解决？

我会给出一个 jsfiddle，但是您将无法复制该问题（这涉及到保存 Web 文件）所以我只发布了下面的代码。

HTML：

<body>
    <button id="add">ADD</button>   
    <div id="area"></div>
</body>

CSS：

#area {
    width: 1000px;
    height: 500px;
    border: 1px solid black;
}

.box {
    position: relative;
    float: left;
    border: 2px solid green;
    width: 100px;
    height: 100px;
}

Javascript/jQuery/jQueryUI：

$(document).ready(function(){

    $('.box').draggable().resizable();

    $('#add').click(function(){
        var box = $('<div />')
            .addClass('box')
            .draggable()
            .resizable();
        box.appendTo($('#area'));
    });

});

起初，resizable() 仅在将框添加到区域时才绑定到框，但是一旦保存页面，元素似乎就失去了所有绑定。这就是为什么我投入第一行（在 JS 中），它绑定了可拖动和可调整大小的第一件事。这使得它即使在重新打开保存的文件后也可以拖动，并且它应该也可以调整大小，但事实并非如此。

我希望我的问题在这里得到了清楚的解释，感谢您给我的任何帮助。我正在使用 Chrome。我试过 jquery 1.10.2 和 jquery 2.0.0。我也尝试过 jquery-ui-1.10.3 和 jquery-ui 1.10.4，都带有平滑度主题。

【问题讨论】：

如果你能解决它，那么解释应该放在答案中，节省其他人尝试帮助的时间，并且它使答案很容易找到
@workabyte 好点。

标签： jquery jquery-ui jquery-ui-resizable

【解决方案1】：

我已经在脚本中添加了一行（第一行），它现在可以工作了。请参阅下面的代码。

$(document).ready(function(){

    $('.box').empty().removeClass('ui-resizable ui-draggable');
    $('.box').draggable().resizable();

    $('#add').click(function(){
        var box = $('<div />')
                .addClass('box')
                .draggable()
                .resizable();
        box.appendTo($('#area'));
    });

});

我实际上是在重置可调整大小和可拖动的效果。当你制作一些可调整大小的东西时，它会在它旁边抛出一堆 div，然后将所有这些包装在一个 div 中。在这种情况下，由于我的选择器已经是一个 div，而不是包装，它把一堆 div 扔进它（'.box'），然后将类添加到它（'.box'）。我写的那一行撤消了它，然后重做了。

要“重置”它，我清空所有“.box”并删除类。然后我让它们重新调整大小和可拖动。

draggable 之前起作用的原因是，它只是元素是否具有“ui-draggable”类的问题，而 resizable 将其他元素添加到混合中。保存页面时，它会保留这些元素和那些类。现在，当它重新加载时，它会尝试再次添加类，但它认为它不需要，所以它不需要。（可拖动很好）。但是对于可调整大小，它会再次添加元素，不管它们已经存在。这种翻倍可能会以某种方式阻碍调整大小...

【讨论】：