У меня есть группа div, которые можно редактировать и перетаскивать, эти div позволяют вам создать дизайн веб-страницы, то есть эти div позиционируются и создаются с этим дизайном страницы, которая затем отображается на пользователь. Проблема в том, чтобы получить отзывчивость на дизайн, созданный с помощью этих элементов. Просмотр этой страницы на планшете и мобильном устройстве полностью не отвечает. Здесь я покажу код, который у меня есть:
$(document).ready(function() {
$(".caja1").draggable();
$(".caja1").resizable();
});
div.container {
position: relative;
border: 1px solid black;
padding-left: 10px;
}
div.caja1 {
width: 100px;
height: 100px;
position: relative;
}
div.caja1 {
background: rgb(83, 53, 117)
}
@media (max-width: 768px) and (min-width: 320px)
{
div.caja1
{ max-width: 255px !important;
width: 255px !important;
left: 0px !important;
margin-right: 0px !important;
}
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="container">
<div class="row">
<div class="caja1" contenteditable="true">
<div class="editable-div">
<p style="color: black;font-size: 34; font-weight: bold; font-style: initial; color: black; width: auto;" contenteditable="true">
this is text
</p>
</div>
</div>
<div class="caja1" contenteditable="true">
<div class="editable-div">
<p style="color: black;font-size: 34; font-weight: bold; font-style: initial; color: black; width: auto;" contenteditable="true">
this is text
</p>
</div>
</div>
</div>
</div>
ПРИМЕЧАНИЕ. Созданный div можно перемещать и помещать в любое место его контейнера благодаря функции draggable () Jquery-UI, его ширину и высоту можно изменять благодаря функции resizable () пользовательского интерфейса Jquery и также его содержание доступно для редактирования. Я могу создать несколько элементов div и разместить их там, где я хочу, а затем сохранить этот HTML-файл в базе данных и показать его на своей главной веб-странице (которая создается с помощью bootstrap). Проблема в том, что когда я вижу контент, созданный на мобильном телефоне или планшете, все выглядит плохо и ничего не реагирует. Кроме того, каждый div имеет свои верхнее и левое значения, которые различаются, так как расположение div может быть изменено с помощью draggable (), а также имеют свои значения ширины и высоты, которые не являются фиксированными, так как с помощью jquery resizable их можно корректировать .
Тогда, как добиться отзывчивости в подобных ситуациях? Контейнер, в котором находятся div, имеет относительную позицию, и каждый div имеет одинаково относительную позицию. Вот пример изображения, где вы можете увидеть версию контента, которую я создаю, а также мобильную версию для настольных компьютеров:
НАСТОЛЬНАЯ ВЕРСИЯ
ОБЫЧНАЯ ВЕРСИЯ
В приведенном выше коде у меня есть небольшой CSS-код для половины запросов.
Объяснение изображений: на первом изображении (версия для настольного компьютера) Каждый текст и каждое изображение находятся внутри элемента div, поэтому в нем есть несколько элементов div. Точно 7 делений, деление заголовка, 3 деления 3 изображений и 3 деления для 3 текстов, которые находятся под каждым изображением.
ТАК, ВЫ ВИДЕЛИ ПРОБЛЕМУ В ИЗОБРАЖЕНИИ МОБИЛЬНОЙ ВЕРСИИ?
Как я могу решить эту проблему?