jqueryui изменяемый размер и перетаскиваемый элемент покрыт

У меня есть два элемента, которые можно перетаскивать и изменять размер. Они выровнены по горизонтали. Моя проблема заключается в том, что когда я пытался изменить размер первого элемента вверху, позиция второго элемента ниже автоматически закрывает первый элемент.

Ниже стиль:

<style>
    #request-grid { width: 500px; min-height: 200px; margin: 10px; padding: 0.5em;}
    #bb-clist { width: 500px; min-height: 200px; margin: 10px; padding: 0.5em;}
    .ui-resizable-helper { border: 2px dotted #00F; }
</style>

Ниже приведен код jqueryui:

$( "#request-grid" ).draggable({containment: "#content", scroll: true, stack: "#content div" });
$( "#bb-clist" ).draggable({containment: "#content", scroll:true, stack: "#content div"});

$( "#request-grid" ).resizable({
helper: "ui-resizable-helper",  containment: "#content"
});

$( "#bb-clist" ).resizable({
helper: "ui-resizable-helper", containment: "#content"
});

Ниже приведен html-элемент:

<div id="request-grid" class="ui-widget-content">
</div>

<div id="bb-clist" class="ui-widget-content">
</div>

Как я решу эту проблему, чтобы другой элемент не закрывал/не перекрывал другой элемент при изменении размера.

Спасибо.


javascript jquery jquery-ui jquery-ui-draggable jquery-ui-resizable
person Pelang    schedule 03.05.2013    source источник
comment
демо: jsfiddle.net/arunpjohny/UNWH7/1   -  person Arun P Johny    schedule 03.05.2013
comment
@ArunPJohny Не могли бы вы указать мне, какие изменения вы внесли? Я не могу понять. Благодарю.   -  person Pelang    schedule 03.05.2013

Ответы (3)


arrow_upward
2
arrow_downward

HTML

<div>
    <div id="request-grid"></div>
    <br/>
    <div id="bb-clist"></div>
</div>

CSS

#request-grid {
    height:100px;
    width: 200px;
    min-height: 100px;
    margin: 10px;
    padding: 0.5em;
    background-color:pink;
}
#bb-clist {
    height:100px;
    width: 200px;
    min-height: 100px;
    margin: 10px;
    padding: 0.5em;
    background-color:blue;
}
.ui-resizable-helper {
    border: 2px dotted #00F;
}

JQuery

$(document).ready(function () {

    $("#request-grid").draggable({
        containment: "#document",
        scroll: false,
        stack: "#content div"
    });
    $("#bb-clist").draggable({
        containment: "#document",
        scroll: false,
        stack: "#content div"
    });

    $("#request-grid").resizable({
        helper: "ui-resizable-helper",
        containment: "document",
        resize: function (event, ui) {
            var height = (ui.size.height + 'px');
            $('#bb-clist').css('posotion', 'absolute').css('top', height);
        },
        stop: function (event, ui) {
            var h2 = (ui.size.height);
            if (h2 < 200) {
                h2 = 100; // set default min-height if re-sized less than min-height.
            }
            $('#bb-clist').css('posotion', 'absolute').css('top', h2);
        }

    });

    $("#bb-clist").resizable({
        helper: "ui-resizable-helper",
        containment: "document"
    });
});

Рабочая демонстрация http://jsfiddle.net/cse_tushar/qkKV6/

person Tushar Gupta - curioustushar    schedule 03.05.2013

arrow_upward
0
arrow_downward

Вы можете использовать значение z-index, чтобы преодолеть проблему перекрытия.

просто поместите более высокое значение z-index для вашего элемента с изменяемым размером, например,

#ResizableElement
{
  z-index: 10;    //default is 1
}

элемент с более высоким значением z-индекса всегда будет перекрывать другой элемент. вы также можете установить значение z-index для вашего перетаскиваемого элемента, который тоже будет работать.

$("#request-grid").draggable({ zIndex: 10 });
person Rohit416    schedule 03.05.2013
comment
оба элемента можно изменять по размеру и перетаскивать, будет ли это работать? Я предполагаю, что у них обоих будет один и тот же zIndex. - person Pelang; 03.05.2013
comment
Я думаю, что этот случай может не сработать, я не уверен. я не смог отредактировать свой ответ из-за нехватки времени, но я думаю, вы нашли решение :) - person Rohit416; 03.05.2013

arrow_upward
0
arrow_downward

Мне удалось решить проблему, используя решения из этих вопросов Ограничить перетаскиваемые элементы jQuery от перекрытия/столкновения с одноуровневыми элементами и Перетаскиваемый возврат, если он находится за пределами этого div и внутри других перетаскиваемых элементов (с использованием как недопустимых, так и допустимых параметров возврата)

Сначала я не использовал термин «столкновение» при поиске моей проблемы.

person Pelang    schedule 03.05.2013
comment
это хорошо, если это сработало для вас. пожалуйста, примите ответ, который сработал для вас, чтобы другие могли извлечь из него пользу. - person Rohit416; 03.05.2013