拖动对象到排序列表 - AngularJS [英] Drag object into sortable list - AngularJS

问题描述

我试图重新创建的jQuery可拖动+可排序的功能，并且无法获得降至元素进入我的对象的数组。

I'm trying to recreate the Draggable + Sortable functionality from jQuery and can't get the dropped element to go into my array of objects.

我想拖一$ .draggable（）按钮到$ .sortable（）名单..我想按钮重新present一个对象的属性（可以是assoc命令数组或对象本身）和当我在我的名单砸我希望它把自己变成它是在下降的位置的数组。

I want to drag a $.draggable() button into a $.sortable() list.. I want the button to represent an object with properties (could be assoc array, or the object itself) and when I drop it in my list I want it to put itself into the the array at the position it was dropped at.

只是要清楚：我的的潜力的的对象在左侧菜单中的数组。在右边我用$ HTTP调用我的API来检索领域具有在所有举办了形式 $范围的。我想，在位置下降的潜在对象（比如文本域）被投进这种形式的领域。

Just to be clear: I have an array of potential objects in a menu to the left. On the right I use $http to call to my API to retrieve a form that has fields all held in $scope. I want that potential object (like a textarea) to be dropped into that form's fields at the position dropped.

jQuery的位是直截了当的，但不存在的物体在$范围数组位置的问题。

The jquery bit is straightforward but the non existent object to position in $scope array is the problem.

我很接近与混合梳理UI的排序和$ .draggable指令的​​包装，但我的code不工作得非常好。

I was close with mixing combing ui-sortable and $.draggable directive wrapper but my code isn't working very well.

• KnockoutJS例如： http://bit.ly/15yrf8X


• jQuery的演示： http://jqueryui.com/draggable/#sortable

• KnockoutJS Example: http://bit.ly/15yrf8X
• jQuery demo: http://jqueryui.com/draggable/#sortable

我已经取得的进展UI可排序像指令与指令相结合的包裹$ .draggable（），有点丑，但工作。

I have made progress with a ui-sortable like directive combined with a directive that wraps $.draggable(), kinda ugly but works.

我现在的工作，但我抓住从jQuery的索引并使用PHP它切成那个位置，然后重新加载整个列表。谈论瘸腿，必须有一个更好的办法。

I have it working now but I grab the index from jquery and use php to slice it into that position and then reload the entire list. Talk about lame there must be a better way.

下面是一个工作的例子模块化为任何人的应用程序。

Here is a working example modularized for anyone's app.

<一个href=\"http://clouddueling.github.io/angular-common\">http://clouddueling.github.io/angular-common

推荐答案

有没有角魔法，可以帮助你找到一个新的或移动元素的位置，但它很容易使用jQuery做。我创建了jQueryUI的-演示包装的例子可排序和可拖动的指令：

There is no angular-magic that can help you find the position of a new or moved element, but it's easy to do with jQuery. I've created an example of the jQueryUI-demo wrapping sortable and draggable in directives:

<一个href=\"http://plnkr.co/edit/aSOlqR0UwBOXgpQSFKOH?p=$p$pview\">http://plnkr.co/edit/aSOlqR0UwBOXgpQSFKOH?p=$p$pview

<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>

我的我-拖动是ID价值为相应的我可排序 -element。我-拖动否则pretty直截了当：

Value of my my-draggable is the id to the corresponding my-sortable-element. my-draggable is otherwise pretty straight forward:

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

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

在我可排序我听这表明一个元素已被删除停用事件。 从是NG-重复源的数组中的元素的位置。纳克重复创建与表示阵列中的当前元素的位置的$索引变量的每个元素的子范围。如果$指数是不确定的，我知道这是一个新的元素（可能是一个更好的办法来确定这一点，但它适用于本示例）。 到是该项目的新位置。 I $或发出一个我的排序事件，如果现有的元素被移动的我的创建，如果添加了一个新的项目的事件。

In my-sortable I listen to the deactivate event which indicates that an element has been dropped. from is the position of the element in the array that is the source of ng-repeat. ng-repeat creates a child scope for each element with an $index variable indicating the position of the current element in the array. If $index is undefined I know that it's a new element (might be a better way to determine this, but it works for this example). to is the new position of the item. I $emit a 'my-sorted' event if an existing element was moved or a 'my-created' event if a new item was added.

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();
            }
          })
        }
      } );
    }
  }
})

在控制器创建的项目阵列，并听取事件：

In the controller I create the items-array and listen to the events:

$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});
})

正如你可以看到，当您添加或范围被更新移动元素模型。

As you can see, when you add or move an element the model in the scope gets updated.

这些指令并不是很一般 - 你可能必须做一些调整，让他们与你的应用程序正常工作

These directives are not very general - you might have to do some adjustment to get them to work with your application.

这篇关于拖动对象到排序列表 - AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！