Как использовать изменяемый размер / alsoresize для нескольких DIV, которые изменяют размер одинаково - PullRequest
Новая
       27

Как использовать изменяемый размер / alsoresize для нескольких DIV, которые изменяют размер одинаково

0 голосов
/ 11 мая 2019

Я хотел бы использовать прикрепленный код для размещения нескольких DIV-ов и изменения их размера одновременно, используя функцию jquery resizable / tooResize.

Легко жестко запрограммировать пару элементов div, но я хочу вместо этого создать цикл, который может адресовать 5,10 или более элементов div, для которых необходимо использовать также Resize.

Благодаря тому, как работает метод «Изменить размер», элементы div, использующие его, не изменяют размер так же, как исходный элемент div, фактически они изменяют размер в противоположном направлении.Похоже, что следующий код может помочь сделать все размеры div в правильном направлении:

http://plnkr.co/edit/WCrmVU7gc9VFJfWh8UHJ?p=preview

Код: 

    <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <link data-require="jqueryui@1.10.0" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
    <script data-require="jqueryui@1.10.0" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>

<script>
    $( document ).ready(function() {  
    $('#div1').resizable({
        handles: 'all',
        alsoResize: '#div2',
        alsoResize: '#div3',
        start: function() {
            this.div2pos = $("#div2").offset();
            this.div3pos = $("#div3").offset();
        },
        resize: function(e, ui) {
            var left = ui.position.left - ui.originalPosition.left;
            var top = ui.position.top - ui.originalPosition.top;
            var pos2 = this.div2pos;
            $("#div2").offset({top: pos2.top + top, left: pos2.left + left});
            var pos3 = this.div3pos;
            $("#div3").offset({top: pos3.top + top, left: pos3.left + left});
        }
    });
    }); 

</script>        


<div id="div1" style="width:100px;height:100px;background-color:orange;margin:30px;float:left"></div>
<div id="div2" style="width:100px;height:100px;background-color:blue;margin:30px;float:left"></div>
<div id="div3" style="width:100px;height:100px;background-color:blue;margin:30px;float:left"></div>
<div id="div4" style="width:100px;height:100px;background-color:blue;margin:30px;float:left"></div>

Я надеюсь, чтоЦикл, который может адресовать несколько делений, чем жестко их кодировать вручную, как я делал выше, но я не нашел способа сделать это.

...