Question

我正在尝试实现模板创建页面。

页面的一侧是您可以选择的元素，另一侧有一个框，您可以在其中删除（和复制）元素并调整其大小。

这将生成由用户创建并保存到DB中的完整表单。我使用的代码依赖于 jQuery 列表并拖放代码。

当我将第一个列表中的一个元素拖到框中（第二个列表）时，列表项会获得复制并调整大小。在我尝试拖放项目（已经克隆）之后的第二次和任何时间，它都没有调整大小。

我有研究，并没有找到一个解决方案，其中copyhelper创建一个可调整大小的克隆。

在浏览器中，代码表示所有新元素都在我的可调整大小的类中。

我正在使用此代码：

<script type="text/javascript">
$(function ($) {
    $(function () {
        $("#sortable1").sortable({
            connectWith: ".connSort",
            helper: function (e, li) {

                this.copyHelper = li.clone().insertAfter(li);
                // Copy helper ne retourne pas les propriete resizable

                $(this).data('copied', false);
                var lis = li.clone();
                return lis
            },

            stop: function () {

            var copied = $(this).data('copied');

            if (!copied) {
            this.copyHelper.remove();
            }

            this.copyHelper = null;
            }
        }).disableSelection();
    });

    $(function () {
        $("#sortable2").sortable({
            receive: function (e, ui) {
            ui.sender.data('copied', true);
            }
        })
    });

    $(function () {
        $(".osizer").resizable({ grid: 25 })
    });

});



</script>

HTML：

     <div style="width:20%;float:left">
        <div style="width:100%; height:100%">
            <ul id="sortable1" class="connSort">
                <li class="ui-state-default osizer"> Vide </li>
                @foreach (DataRow row in Model.Tables["Champs"].Rows)
                {
                    <li class="ui-state-default osizer"> @row["Nom"]  
                }
            </ul>
        </div>
    </div>

    <div style="width:80% ; height:80%; float:right ; border:1px solid black">
        <div id="container" style="width:100%; height:100%">
            <ul id="sortable2" class="connSort" style="width:100%; height:100%"></ul>
        </div>
    </div>

Answer 1

我找到了一个解决方法：

<script src="~/Scripts/jquery-1.12.4.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1/jquery-ui.js"></script>

<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />

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


        $(function () {

            $("#sortable1 li").draggable({
                connectToSortable: '#sortable2',
                helper: 'clone'

            });

            $('#sortable2').sortable({
                out: function (e, ui) {
                    $('#sortable2').children().resizable({
                        minHeight: '10',
                        containement: '#sortable2',
                        resize: function (e, ui) {
                            (ui.helper).css({ position: 'relative', left: '0', top: '0' })
                        }
                    })
                }
            });

            $('ul,li').disableSelection();

        });
    });



</script>

HTML：

<body style="height:800px;padding:30px;">

<div style="width:100%;height:800px">

            <ul id ="sortable1" style="width:20%;float:left">
                <li class="ui-state-default osizer"> Vide </li>
                @foreach (DataRow row in Model.Tables["Champs"].Rows)
        {
                    <li class="ui-state-default osizer"> @row["Nom"] - @row["DeType"]</li>
                }
            </ul>
    <ul id ="sortable2" style="width:80% ; height:80%; float:right ; border:1px solid black" ></ul>
</div>

</body>

使用可调整大小的元素将项目从列表复制到另一个列表jQuery

1 个答案: