Question

我的应用程序中有以下设置： http://plnkr.co/edit/I2RCjYU17SDX65thUUqD?p=preview

<div class="container-fluid">

<div class="row-fluid">

    <div class="col-xs-7">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">
                    Panel 1
                </div>
            </div>
            <div class="panel-body" style="height: 250px;">
              Panel 1
            </div>
        </div>
    </div>

    <div class="col-xs-5">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">
                    Panel 2
                </div>
            </div>
            <div class="panel-body" style="height: 250px;">
              Panel 2
            </div>
        </div>
    </div>

</div>


<div class="row-fluid">

    <div class="col-xs-7">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">
                    Panel 3
                </div>
            </div>
            <div class="panel-body" style="height: 250px;">
              Panel 3
            </div>
        </div>
    </div>

    <div class="col-xs-5">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">
                    Panel 4
                </div>
            </div>
            <div class="panel-body" style="height: 250px;">
              Panel 4
            </div>
        </div>
    </div>

</div>

我要做的是能够通过拖动来重新排序面板。例如，我希望能够将面板1拖动到右下角，并使用面板4切换位置。我对angularjs相对较新，我不知道如何解决这样的问题。

我最初的想法是为每个可能的面板组合创建一个不同的模板，并动态地包含我设置的变量的模板，但是这需要有16个不同的模板，我觉得必须有更好的解决方案。< / p>

Answer 1

您可以在Angularjs中使用外部依赖项（Angular-dragdrop）。当您在其他位置拖动画布时，为每个画布指定一个序列并按顺序重新排序。

您可以在此处找到更多信息：http://codef0rmer.github.io/angular-dragdrop/#/

通过使用angularjs拖动来动态更改模板

1 个答案: