Question

我正在做一个自定义表单构建器。我在这里有一个问题。我想在添加子div时调整父div的大小。它也应该在嵌套的子div中工作，这样所有相应的父级高度应该根据子div改变脚本

$('.innerElements').draggable({
        helper: 'clone'
    });
    $('.dataContainer').sortable();

    $('.dataContainer, .innerElements').droppable({
        greedy: true,
        drop: function (event, ui) {
            debugger;
            var x = $(ui.draggable)
            if (!$(x).hasClass('temper')) {
                debugger;
                var y = x.clone();
                y.addClass('temper');
                var k = $(document.elementFromPoint(ui.position.left, ui.position.top))
                var w = k.width();
                var h = k.height();
                $(k).height(h + 50)
                $(k).width(w + 50)

                $(k).append($(y));
                $(y).children().sortable();
            }
        }
    });

＆＃39; .innerElements＆＃39;是拖动所需元素的类，并且在droppable函数中，我希望根据嵌套的子div添加所有父div进行放大

html和javascript

<div class="eleContainer">
</div>
<div class="dataContainer">
</div>
<script type="text/javascript">
    $('.eleContainer').append('<div class="headElements"><b>Form Elements<b></div>')
    $('.eleContainer').append('<div class="subElements"></div>')

    $('.subElements').append('<h6>Container</h6>')
                     .append('<div class="contElements form"></div>')
                     .append('<h6>Form Elements</h6>')
                     .append('<div class="formElements" form></div>')

    $('.subElements').accordion({ active: false, collapsible: true })
    $('.contElements').append('<div class="innerElements header">Header</div>')
                      .append('<div class="innerElements container">Container</div>')
                      .append('<div class="innerElements footer">Footer</div>')

    $('.formElements').append('<div class="innerElements form_ele buttongroup">Button Group<br></div>')
                      .append('<div class="innerElements form_ele button">Button<br></div>')
                      .append('<div class="innerElements form_ele radioButton">Radio button<br></div>')
                      .append('<div class="innerElements form_ele checkbox">CheckBox<br></div>')
                      .append('<div class="innerElements form_ele text">Text<br></div>')
                      .append('<div class="innerElements form_ele label">Label<br></div>')
                      .append('<div class="innerElements form_ele forTexta">TextArea<br></div>')


    $('.header').append('<div class="headerdiv common"></div>')
    $('.container').append('<div class="containerdiv common"></div>')
    $('.footer').append('<div class="footerdiv common"></div>')

    $('.buttongroup').append('<button>Button1</button>')
                    .append('<button>Button2</button>')
                    .append('<button>Button3</button>')

    $('.button').append('<button>Button1</button>')

    $('.radioButton').append('<input type="radio" value="radio1" id="formradio" class="formradio"> radio1<br>')
                                          .append('<input type="radio" value="radio2" id="formradio" class="formradio">radio2<br>')
                                          .append('<input type="radio" value="radio3" id="formradio" class="formradio">radio3<br>')
                                          .append('<input type="radio" value="radio4" id="formradio" class="formradio">radio4<br>')

    $('.checkbox').append('<input type="checkbox" id="formcheck1" class="formcheck">checkbox1<br>')
                  .append('<input type="checkbox" id="formcheck2" class="formcheck">checkbox2<br>')
                  .append('<input type="checkbox" id="formcheck3" class="formcheck">checkbox3<br>')
                  .append('<input type="checkbox" id="formcheck4" class="formcheck">checkbox4<br>')

    $('.text').append('<input type="text" id="formtext" class="formtext">')

    $('.forTexta').append('<textarea>Include Text</textarea>')

元素通过javascript

附加到div

根据添加的嵌套子div调整父div的大小

html和javascript

0 个答案: