Javascript 角形可拖曳潜水器

我需要能够将一个div从一个拖到另一个。问题是，我认为所有的内部div都是可以拖动的独立对象。我的主要目标是，如果div的任何部分被拖拽，它将承载整个div

 <div ng:controller="controller">
<div ui-sortable="sortableOptions" ng-model="list" class="group item" ng-repeat="item in list">
    <div>header {{item}}</div>
    <div>body {{item}}</div>
    <div>footer {{item}}</div>
</div>

<div ui:sortable="sortableOptions" ng:model="list2" class="group dragarea" >
    <li ng:repeat="item in list2" class="item">{{item}}</li>
</div>

您可以分别拖动页眉、正文或页脚div，这是我不想要的。我想把它的任何一部分都拖走，把它的三部分都拖走

这是我目前工作的一把小提琴。

---

只需将页眉、正文和页脚放在一个div中：

<div ui-sortable="sortableOptions" ng-model="list" class="group item" ng-repeat="item in list">
    <div>
        <div>header {{item}}</div>
        <div>body {{item}}</div>
        <div>footer {{item}}</div>
    </div>
</div>

标题{{item}
正文{{item}
页脚{{item}

你能不能把这3个项目包装在它们自己的容器div中，让它成为可拖动的对象？真不敢相信我没早点看到这一点。

<div ui-sortable="sortableOptions" ng-model="list" class="group item" ng-repeat="item in list">
    <div>
        <div>header {{item}}</div>
        <div>body {{item}}</div>
        <div>footer {{item}}</div>
    </div>
</div>