Question

我想调用一个命令，该命令将导致html元素及其子元素（调用该目标）移动到另一个html元素（调用该目标）。当目标移动时，我希望它重新调整大小以适应目的地。

您可以将其视为jQuery UI传输效果，但不是传输大纲，而是传输整个元素。

我想我可以编写代码来异步翻译并执行调整大小效果，但我更喜欢一个不那么费力的过程。是否有插件或其他一些罐头功能我可以利用它来做到这一点？或者CSS3 + HTML5能让我轻松实现这一目标吗？

我有两列，'sub'和'main'。当我点击sub中的元素时，我希望它以所需的效果传输到main。这两列是可排序的，使用JQuery UI可排序插件完成。

以下是我的HTML和相关CSS的示例：

<script type="text/javascript">
            $(document).ready(function() {

                $(".column").sortable(
                    {
                        handle: '.widget-title',
                        revert: true,
                        scroll: true,
                        placeholder: 'hover',
                        cursor: 'move',
                        revert: true,
                        connectWith: ".column",
                        opacity:0.5
                    }
                );
$( '.segment' ).addClass( 'ui-widget ui-widget-content ui-helper-clearfix ui-corner-all' )
                    .find('.widget-title')
                        .addClass('ui-widget-header ui-corner-all');
            }); 
        </script>

        <div id="sub" class="column">
            <div class="segment">
                <ul>
                    <li>
                        <div class="widget-title">
                            <h4>Widget 1</h4>
                        </div>
                    </li>
                    <li>
                        <div class="transfer-to-main btn">
                            <p>To Main</p>
                        </div>
                    </li>
                    <li>
                        <div class="widget-content">                            
                            <p>When Colonel Arcadio Buendia stood before the firing squad he 
                            thought of the day his father took him to see ice.</p>
                        </div>
                    </li>
                </ul>
            </div>              

            <div class="segment">
                <div class="widget-title">
                    <h4>Widget 3</h4>
                </div>
                <div class="transfer-to-main btn">
                    <p>To Main</p>
                </div>
                <div class="widget-content empty-widget">                                           
                </div>
            </div>
        </div>

CSS：

html, body, #dashboard {
    height: 100%;
    width: 100%;
}

ul {
    list-style: none;
}

div.column {
  float: left;    
  border-style: dashed;
  border-width: thin;
}

div.empty-widget {
    width: 80px;
    height: 20px;
    background-color: green;
}

#main{
    width: 50%; 
    height: 100%;
}

.btn{
    background-color: blue;
}

.ui-effects-transfer { border: 2px dotted gray; background-color: red; }

#sub {
    width: 30%
}

div.segment {
    margin: 1em;
    border-style: solid;
    border-width: thin;
}

.widget-title {
    margin: .3em;
    padding-bottom: 4px;
    padding-left: .2em; 
}

.ui-sortable-placeholder {
    border: 1px dotted black;
    visibility: visible !important;
    height: 50px !important
}

.ui-sortable-placeholder * {visibility: hidden;}

Answer 1

This Demo中的代码是否适合您的工作？

只有2行（可能是一行）JavaScript代码，animate()且没有jquery-ui

结合传输和大小效果，或组合翻译和调整大小

1 个答案: