Блог

Главная - Вопросы по программированию - Проблема с перекрытием пользовательского интерфейса jQuery с возможностью изменения размера

Проблема с перекрытием пользовательского интерфейса jQuery с возможностью изменения размера

#javascript #html #css #jquery-ui #jquery-ui-resizable

#javascript #HTML #css — код #jquery-пользовательский интерфейс #jquery-ui-изменяемый размер

Вопрос:

Я получаю проблему с изменяемым размером класса в пользовательском интерфейсе jQuery (http://jqueryui.com/resizable /) Когда начинается изменение размера, все приведенные ниже div перемещаются, чтобы перекрываться с изменением размера div. Используя консоль js в Chrome, я заметил, что изменяемый размер помещает что-то в cssText. (позиция: абсолютная; вверху: 24 пикселя; слева: 593,90625 пикселей; высота: 218 пикселей; ширина: 161 пикселей;) При его удалении перекрытие прекращается, но размер div больше не изменяется.

HTML :

 <div id="widget1" class="widget taille-2-2 drag">
    Val : <span id="span1">10</span>
</div>
<div id="widget2" class="widget taille-1-1 drag">
    Val : <span id="span2">20</span>
</div>
<div id="widget3" class="widget taille-2-1 drag">
    Val : <span id="span3">30</span>
</div>

CSS — код :

 .widget {
    padding: 2px;
    border: 2px solid #ccc;
    float: left;
    overflow: hidden;
}

.taille-1-1 {
    width: 47px;
    height: 47px;
}

.taille-2-1 {
    width: 104px; /* taille*2 padding*2 border*2 tile.margin*2 */
    height: 47px;
}

.taille-2-2 {
    width: 104px;
    height: 104px;
}

.drag {
    position: relative;
    margin: 3px;
}

Javascript :

 $(".drag").draggable(
{
     helper: "clone"
});
$(".widget").resizable(
{
    grid: [57,57],
    maxHeight: 332,
    maxWidth: 218
});

вот скрипка.

Комментарии:

1. скрипка была бы хорошей

2. Я добавил скрипку. Также пришлось добавить немного javascript для воссоздания ошибки.

3. итак, вы не хотите, чтобы происходило какое-либо перекрытие? я прав?

4. да, жестко, я не возражаю, если макет был изменен

5. Найдено решение: установите addClasses: false в перетаскиваемом. Не могу ответить себе жестко.

Ответ №1:

Я нашел способ решить проблему, но я не понимаю, почему она работает :

Javascript :

 $(".drag").draggable(
{
     helper: "clone",
     addClasses: false
});
$(".widget").resizable(
{
    grid: [57,57],
    maxHeight: 332,
    maxWidth: 218
});
Метки: