问题描述
我试图重新创建的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例如：
- jQuery的演示：
- 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.
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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！