angulargs中的可拖动div

时间:2014-09-08 13:36:18

标签: javascript html angularjs

我需要能够将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>

$scope.list = ["1", "2", "3", "4", "5", "6"];

$scope.list2 = [];

$scope.sortableOptions = {
    update: function(e, ui) {
               },
    receive: function(e, ui) {


    },
    connectWith: ".group"
};

您可以单独拖动页眉,正文或页脚div,这是我不想要的。我希望它的任何部分被拖动以携带它的所有3个部分。

这是我当前工作的一个小提琴。 http://jsfiddle.net/cna5L7b7/

1 个答案:

答案 0 :(得分:0)

将标题,正文和页脚放在一个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>