Angular + jquery ui 可排序

Question

看这个fiddlehttps://jsfiddle.net/Lj0swckj/3/

我已经为 sortable 创建了指令对于 parent div 可排序工作正常我希望孩子们也能得到同样的东西，因为它 parent 在给定的示例中，child1、child2、child3 可以交换位置，包含将为 parent1.

我试了很多但找不到任何东西

注意：也可以 children 为 child1, child2... （在此示例中，我添加了两个级别的数据，但最多可以添加四个级别）

所以我想要一个解决方案，其中 sortable 可以用于此类递归模板。

如有任何帮助，我们将不胜感激。

angular.module("myApp", []).
controller("myController", ['$scope', function($scope) {
    $scope.fields = [{
      "name": "parent1",
        "level": 1,
        "children": [{
           "name": "child1",
            "level": 2
        }, {
          "name": "child2",
            "level": 2
        }, {
          "name": "child3",
            "level": 2
        }]
    }, {
      "name": "parent2",
        "level": 1
    }, {
      "name": "parent3",
        "level": 1
    }];
    
    $scope.draggableItemsOption = {
     "moverElement": ".moverBtn",
   "containment": ".draggable-field"
    }
}]).directive("myDragDrop", ['$timeout', function ($timeout) {

  return {
   restrict:'A',
   scope: {
    myDragDrop:"="
   },
   link: function ($scope, element, attrs) {
    var options = $scope.myDragDrop;
    var $container = element;
   
    
    var sortableOptions = {
          /* handle: options.moverElement, */
           containment: options.containment,
           delay: 0
     };


    if($container.sortable){
     $container.sortable(sortableOptions);
    }
    
       }
       }
     
 }]);

.element {
   border: 1px solid #333;
   padding: 10px 10px;
   position: relative;
}

.element-class {
  margin-left: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
    
    <div class="draggable-field" my-drag-drop="draggableItemsOption">
        <div ng-repeat="data in fields">
            <div class="element" ng-class="{'element-class': data.level > 1}"> 
              {{data.name}}
              <div ng-repeat="childData in data.children">
                  <div class="element" ng-class="{'element-class': data.level > 1}"> 
                    {{childData.name}}
                   </div>
              </div>
           </div>
      </div>
    </div>
</div>

Answer 1

咦！终于得到了解决方案。其实很简单

这里看这个fiddlehttps://jsfiddle.net/Lj0swckj/6/ 我所做的是创建子元素

angular.module("myApp", []).
controller("myController", ['$scope', function($scope) {
    $scope.fields = [{
      "name": "parent1",
        "level": 1,
        "children": [{
           "name": "child1",
            "level": 2
        }, {
          "name": "child2",
            "level": 2
        }, {
          "name": "child3",
            "level": 2,
            "children": [{
              "name": "grandChild1",
                "level": 3
            }, {
              "name": "grandChild2",
                "level": 3
            }]
        }]
    }, {
      "name": "parent2",
        "level": 1,
        "children": [{
         "name": "child4",
          "level":2
        }]
    }, {
      "name": "parent3",
        "level": 1
    }];
    
    $scope.draggableItemsOption = {
     "moverElement": ".moverBtn",
   "containment": ".draggable-field"
    }
    
    $scope.childDraggableItemsOption = {
      "containment": "parent"
    }
}]).directive("myDragDrop", ['$timeout', function ($timeout) {

  return {
   restrict:'A',
   scope: {
    myDragDrop:"="
   },
   link: function ($scope, element, attrs) {

    var options = $scope.myDragDrop;
    var $container = element;
   
    
    var sortableOptions = {
          /* handle: options.moverElement, */
           containment: options.containment,
           delay: 0
     };


    if($container.sortable){
     $container.sortable(sortableOptions);
    }
    
       }
       }
     
 }]);

.element {
   border: 1px solid #333;
   padding: 10px 10px;
   position: relative;
}

.element-class {
  margin-left: 20px;
}

.moverBtn {
  position: absolute;
  top: 2px;
  right: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myController">
    <script type="text/ng-template"  id="tree_item_renderer.html">
    <div class="child-draggable-field" my-drag-drop="childDraggableItemsOption">
      <div ng-repeat="data in data.children" ng-class="{'element-class': data.level > 1}">
        <div class="element"> {{data.name}} ------ {{$parent.$parent.data.children.length}}</div>
          <div ng-include="'tree_item_renderer.html'">
              </div>
       </div>
    </div>
</script>
    <div class="draggable-field" my-drag-drop="draggableItemsOption">
        <div ng-repeat="data in fields">
            <div class="element" ng-class="{'element-class': data.level > 1}"> 
              {{data.name}}
              <div ng-include="'tree_item_renderer.html'">
              </div>
           </div>
      </div>
    </div>
</div>

Angular + jquery ui 可排序

Angular + jquery ui sortable

jquery-ui

jquery-ui-sortable

jquery-ui-autocomplete

angularjs

angularjs-directive