Question

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

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

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中），它将可拖动和可调整大小的第一个东西绑定在准备就绪上。这使得即使在重新打开保存的文件后它也可以拖动，并且它也应该使它可以调整大小，但它不会。> / / p>

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

Answer 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 INTO（'。box'），然后将类添加到IT（'.box'）。我写的那条线解开了它，并重做它。

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

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

保存html文件后，jqueryUI resizable无法正常工作

1 个答案: