После сохранения HTML-файла jqueryUI изменяемый размер не работает

Question

После сохранения HTML-файла jqueryUI изменяемый размер не работает

0

На моей странице есть кнопка. После щелчка по нему в область на странице добавляется окно. Эта коробка предназначена для перетаскивания и изменения размеров. Все работает. Затем я сохраняю мою 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), которая связывает перетаскиваемую и изменяемую по размеру первую вещь на готовой. Это делает его перетаскиваемым даже после повторного открытия сохраненного файла, и он также должен сделать его изменчивым, но это не так.

Я надеюсь, что моя проблема здесь четко объяснена, спасибо за любую помощь, которую вы можете мне дать. Я использую Chrome. Я пробовал jquery 1.10.2 и jquery 2.0.0. Я также пробовал jquery-ui-1.10.3 и jquery-ui 1.10.4, как с темой гладкости.

Partik 22 май 2014, в 03:51

Источник

0

если вы смогли это исправить, то объяснение должно идти в ответе, сэкономить время, пытаясь помочь, и это поможет легко найти ответ
workabyte 22 май 2014, в 20:43
0

@workabyte Хороший вопрос.
Partik 28 июнь 2014, в 01:22

Теги:

jquery

jquery-ui

jquery-ui-resizable

1 ответ

Ещё вопросы

если вы смогли это исправить, то объяснение должно идти в ответе, сэкономить время, пытаясь помочь, и это поможет легко найти ответ

Partik · Accepted Answer · 2014-06-27T23-36-00.000Z

Я добавил одну строку в скрипт (первая строка), которая заставляет его работать. См. Код ниже.

$(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'));
    });

});

Я практически восстанавливаю изменяемые и перетаскиваемые эффекты. Когда вы делаете что-то изменчивое, оно бросает кучу divs рядом с ним, а затем завертывает все это в div. В этом случае, поскольку мой селектор уже был div, вместо того, чтобы обертывать, он бросил кучу divs INTO ('.box'), а затем добавил классы в IT ('.box'). Строка, которую я написал, отменяет это и повторяет ее.

Чтобы "перезагрузить" это, я освобождаю все ".box" и удаляю классы. Затем я делаю их изменчивыми и перетаскиваемыми снова.

Причина, по которой перетаскиваемая работа была раньше, заключалась в том, что дело просто в том, имеет ли элемент класс "ui-draggable", тогда как resizable добавляет другие элементы в микс. Когда страница сохраняется, она сохраняет эти элементы и эти классы. Теперь, когда он перезагружается, он пытается добавить классы снова, но он видит, что это не нужно, так что это не так. (перетаскивание в порядке). Но для изменяемого размера он снова добавит элементы, независимо от того, что они уже есть. Это удвоение, вероятно, как-то мешает изменить размер...