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

问题描述

我的应用程序中具有以下设置： :

<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个不同的模板，我觉得必须有一个更好的解决方案。