将对象拖到可排序列表中 - AngularJS

Question

问题:

我正在尝试从jQuery重新创建Draggable + Sortable功能,并且无法将被删除的元素放入我的对象数组中.

我想将$ .draggable()按钮拖到$ .sortable()列表中.我希望按钮代表具有属性的对象(可以是关联数组,或对象本身),当我将其放入列表中时我希望它将自己放入数组中的位置.

---

为了清楚起见:我在左边的菜单中有一系列潜在的对象.在右边,我使用$ http来调用我的API来检索一个包含所有字段的表单,这些字段都保存在$ scope中.我希望将该潜在对象(如textarea)放入该表单的删除位置的字段中.

jquery位很简单,但是$ scope数组中不存在的对象是问题所在.

---

我尝试过的:

我很接近混合使用ui-sortable和$ .draggable指令包装器,但我的代码工作得不好.

---

例子:

• KnockoutJS示例:http://bit.ly/15yrf8X
• jQuery演示:http://jqueryui.com/draggable/#sortable

---

更新1:

我已经取得了进展,使用ui-sortable like指令结合包装$ .draggable()的指令,有点丑陋但有效.

更新2:

我现在有它工作但我从jquery获取索引并使用php将其切片到该位置然后重新加载整个列表.谈论跛脚必须有更好的方法.

更新3:

这是一个模块化的工作示例,适用于任何人的应用程序.

http://clouddueling.github.io/angular-common

Answer 1

没有角度魔法可以帮助你找到新元素或移动元素的位置,但是使用jQuery很容易.我已经在指令中创建了一个jQueryUI-demo包装可排序和可拖动的示例:

http://plnkr.co/edit/aSOlqR0UwBOXgpQSFKOH?p=preview

<ul>
  <li my-draggable="#sortable" class="ui-state-highlight">Drag me down</li>
</ul>

<ul my-sortable id="sortable">
  <li class="ui-state-default" ng-repeat="item in items">{{item.name}}</li>
</ul>

my的值my-draggable是相应my-sortable-element 的id .my-draggable非常直接:

app.directive('myDraggable',function(){

  return {
    link:function(scope,el,attrs){
      el.draggable({
        connectToSortable: attrs.myDraggable,
        helper: "clone",
        revert: "invalid"
    });
    el.disableSelection();
    }
  }
})

在my-sortable我收听deactivate指示元素已被删除的事件.from是数组中元素的位置,它是ng-repeat的来源.ng-repeat为每个元素创建一个子范围,其中$ index变量指示当前元素在数组中的位置.如果$ index未定义,我知道它是一个新元素(可能是一个更好的方法来确定它,但它适用于这个例子).to是该项目的新位置.如果移动现有元素,我会发出'my-sorted'事件,如果添加了新项目,则发出'my-created'事件.

app.directive('mySortable',function(){
  return {
    link:function(scope,el,attrs){
      el.sortable({
        revert: true
      });
      el.disableSelection();

      el.on( "sortdeactivate", function( event, ui ) { 
        var from = angular.element(ui.item).scope().$index;
        var to = el.children().index(ui.item);
        if(to>=0){
          scope.$apply(function(){
            if(from>=0){
              scope.$emit('my-sorted', {from:from,to:to});
            }else{
              scope.$emit('my-created', {to:to, name:ui.item.text()});
              ui.item.remove();
            }
          })
        }
      } );
    }
  }
})

在控制器中,我创建items-array并监听事件:

$scope.items = [
  {name:'Item 1'},
  {name:'Item 2'},
  {name:'Item 3'},
  {name:'Item 4'},
];

$scope.$on('my-sorted',function(ev,val){
  // rearrange $scope.items
  $scope.items.splice(val.to, 0, $scope.items.splice(val.from, 1)[0]);
})

$scope.$on('my-created',function(ev,val){
  // create new item at position 
  $scope.items.splice(val.to, 0,
    {name:'#'+($scope.items.length+1)+': '+val.name});
})

如您所见,当您添加或移动元素时,范围中的模型会更新.

这些指令不是很通用 - 您可能需要进行一些调整才能使它们与您的应用程序一起使用.