Question

我有拖放代码。但问题是：当我从第一个div拖动元素并将其放到第二个div时。然后第一和第二div的高度应该增加或减少。取决于元素的大小。

此外，所有div（黄色）应始终具有相同的高度。

解释它我有形象。和Jsfiddle code。

在上面的图像蓝色（mainPageDiv），粉红色（dashBoardContainer）和黄色（dbContainer1，dbContainer2和dbContainer3）是div。

我希望我已经解释得足够多了。

CSS

   .mainPageDiv {
       min-height:100%, width:auto;
       margin:0 auto;
   }
   .dashBoardContainer {
       /*background lightcyan;*/
       width: 100%;
       overflow: hidden;
       padding: 15px 0px 10px 0px;
       position:absolute;
       border: dashed 2px red;
       overflow-y: scroll;
       background: #efefef;
   }
   .dbContainer1, .dbContainer2, .dbContainer3 {
       position:relative;
       margin: 10px;
       height: 100%;
       padding:10px;
   }
   .column {
       /* height: 100%; */
       margin:10px;
       width: 100%;
       border: solid green 2px;
   }
   .dbContainer1 {
       width: 40%;
       float: left;
       border: dotted 1px red;
   }
   .dbContainer2 {
       width: 40%;
       float: left;
       border: dotted 1px green;
   }
   .portlet:hover {
       /* cursor: pointer;
                    cursor: hand;*/
       -webkit-box-shadow: 0px 4px 10px 0px rgba(50, 50, 50, 0.3);
       -moz-box-shadow: 0px 4px 10px 0px rgba(50, 50, 50, 0.3);
       box-shadow: 0px 4px 10px 0px rgba(50, 50, 50, 0.3);
   }

HTML

<div class="mainPageDiv">
    <div class="dashBoardContainer">
        <div class="dbContainer1 column">
            <div class="flip">
                <div class=" card">
                    <div class="face front">
                        <div class=" portlet   ">
                            <div class="portlet-header"> <span class="red text-uppercase"> Drag me </span>

                                <div class="dropdown pull-right "> <span class="pull-right ">
                                        <span class=""  id="edit-changes"><a href="#" > Edit <span class="glyphicon glyphicon-pencil pull-right flipLink" > </span>

                                    </a>
                                    </span>
                                    </span>
                                    <hr class="hrflipForm">
                                </div>
                                <!-- portlet-content -->
                            </div>
                            <div class="portlet-content lastViewedArticle ">
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text</div>
                            <!-- portlet-header -->
                        </div>
                        <!-- portlet- -->
                    </div>
                    <!-- moveOnchange-->
                    <div class="face back">
                        <div class="inner">
                            <div class="portlet">
                                <div class="flipForm">
                                    <ul class="list-inline pull-right ">
                                        <li class="flipControl" id="save-changes"> <span class="pull-right glyphicon glyphicon-floppy-disk gi-1x opacity7 "></span>

                                        </li>
                                    </ul>
                                    <hr class="hrflipForm">
                                </div>
                                <!-- Header Closed -->
                                <div class="portlet-content lastViewedArticle ">
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text</div>
                                <!--- Portlet content -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- dbContainer1 -->
        </div>
        <div class="dbContainer2 column">
            <div class="flip">
                <div class=" card">
                    <div class="face front">
                        <div class=" portlet   ">
                            <div class="portlet-header"> <span class="red text-uppercase">  Drag me </span>

                                <div class="dropdown pull-right "> <span class="pull-right ">
                                        <span class=""  id="edit-changes"><a href="#" > Edit <span class="glyphicon glyphicon-pencil pull-right flipLink" > </span>

                                    </a>
                                    </span>
                                    </span>
                                    <hr class="hrflipForm">
                                </div>
                                <!-- portlet-content -->
                            </div>
                            <div class="portlet-content lastViewedArticle ">
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text
                                <br>text</div>
                            <!-- portlet-header -->
                        </div>
                        <!-- portlet- -->
                    </div>
                    <!-- moveOnchange-->
                    <div class="face back">
                        <div class="inner">
                            <div class="portlet">
                                <div class="flipForm">
                                    <ul class="list-inline pull-right ">
                                        <li class="flipControl" id="save-changes"> <span class="pull-right glyphicon glyphicon-floppy-disk gi-1x opacity7 "></span>

                                        </li>
                                    </ul>
                                    <hr class="hrflipForm">
                                </div>
                                <!-- Header Closed -->
                                <div class="portlet-content lastViewedArticle ">
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text
                                    <br>text</div>
                                <!--- Portlet content -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- dbContainer2 -->
        </div>
    </div>

** Jquery / JS **

$(function () {
    $(".column").sortable({
        connectWith: ".column",
        handle: ".portlet-header",
        cancel: ".portlet-toggle",
        placeholder: "portlet-placeholder ui-corner-all"
    });


    $(".portlet")
        .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
        .find(".portlet-header")
        .addClass("ui-widget-header ui-corner-all")
    $(".portlet-toggle").click(function () {
        var icon = $(this);
        icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
        icon.closest(".portlet").find(".portlet-content").toggle();
    });
});

自动增加拖放元素的高度

0 个答案: