Я создаю APP, который будет доступен для пользователей. Я хотел бы сохранить положение элементов, чтобы позднее переместиться в том же месте. Я обнаружил некоторые подобные вопросы здесь, в stackoverflow, но похоже, что кто-то передал те же проблемы, что и у меня. Итак, мне интересно, правильно ли я понял.
В основном моя проблема: значение позиции элемента может отличаться в зависимости от настройки окна.
Пример. Если я поймаю левую позицию элемента, а мое окно отрегулировано на 50% (меньше) его исходного размера, то моя левая позиция будет отличаться от 100%.
Итак, если пользователь настраивает элементы с окном на 50% меньше и сохраняет его, когда тот же пользователь возвращается, элементы будут беспорядочными (если размер окна изменяется по-разному).
У меня есть этот пример http://jsfiddle.net/EV5JZ/1/
Если вы перейдете на консоль, вы увидите (значение):
console.log($('#section > li:eq(0)').find('.element:last()').position().left);
Если вы измените размер своего окна, вы получите разные значения.
Итак, я что-то пропустил или должен использовать конкретный подход?
CSS:
<style>
body, html {
height: 100%;
overflow: hidden;
}
#section {
list-style-type: none;
padding: 0px;
margin: 0px;
}
#section li {
margin: 0px 0px 1px 0px;
width: 99.9%;
background-color:#ccc;
border: 0px solid red;
min-height: 100px;
float: left;
}
</style>
HTML:
<div id="central-panel">
<div id="template">
<ul id="section">
<li>
<div class="element">1</div>
<div class="element">2</div>
<div class="element">3</div>
<div class="element">4</div>
</li>
<li><span>::</span>Item 2</li>
<li><span>::</span>Item 3</li>
<li><span>::</span>Item 4</li>
</ul>
</div>
</div>
ОБНОВЛЕНИЕ:
Ну, я узнал, как исправить это в Windows, но я понял, что большая проблема связана с MAC.
В принципе, если я изменил float: оставил на элементе класс ни один или изменил шаблон id с "%" на "px", как показано ниже, я могу исправить эту проблему, но на MAC он ведет неправильное поведение.
.element {
float: none;
}
#template {
width: 1000px;
}
Есть идеи?
Ну, на самом деле я пытался сделать худший путь.
Мой макет жидкий, поэтому все определяется с помощью "%". Когда я пытался переместить элементы, мне нужно было вычесть левую позицию, сохраненную для "ширины" элементов макета, которые расположены перед элементом, но проблема в том, что эти элементы макета могут изменить свою "ширину" в соответствии с настройкой поэтому разрешение также может повлиять на разрешение.
Мои элементы, которые должны быть перемещены, находятся внутри элемента DIV, определенного с помощью "px". Таким образом, этот способ намного проще. Я просто вынул из него "float: left" и получил позицию, как $.css("left").
Проблема заключалась в моем подходе. Теперь в основном я получаю и изменяю так:
Получить
$('#section > li:first()').find('.element:last()').css('left')
Переставьте
$('#section > li:first()').find('.element:last()').css('left', '536px');