【发布时间】：2013-06-28 01:51:59
【问题描述】：
我正在尝试使用 c0deformer 的 jQuery UI 实现来实现拖放（参见此处：http://codef0rmer.github.io/angular-dragdrop/#/） 拖动部分工作正常，但我似乎无法获得我所追求的拖放功能。在此应用程序中，我希望能够将可拖动项目拖放到目标 div 中的任何位置，即，我不希望目标范围仅限于列表类型的结构（或一组重复的 div）。这主要是因为用户将在运行中拖动项目，并且无法提前知道用户将拖放多少项目。
我在网上搜索过，但在 Angular 中找不到一个使用拖放而不有效地从一个列表拖动到另一个列表的示例。这可以做到吗？如果是这样，我不确定在拖动项目后如何适当地更新范围。在下面的示例代码中，删除的项目被推送到第二个列表的范围内，并应用新的范围。理想情况下，丢弃的项目的范围是我上面提到的目标 div。我对 Angular 很陌生，因此非常感谢任何建议。
来自 c0deformer 的片段：
app.directive('droppable', function($compile) {
return {
restrict: 'A',
link: function(scope,element,attrs){
//This makes an element Droppable
element.droppable({
drop:function(event,ui) {
var dragIndex = angular.element(ui.draggable).data('index'),
dragEl = angular.element(ui.draggable).parent(),
dropEl = angular.element(this);
console.log(dropEl);
if (dragEl.hasClass('list1') && !dropEl.hasClass('list1') && reject !== true) {
scope.list2.push(scope.list1[dragIndex]);
scope.list1.splice(dragIndex, 1);
} else if (dragEl.hasClass('list2') && !dropEl.hasClass('list2') && reject !== true) {
scope.list1.push(scope.list2[dragIndex]);
scope.list2.splice(dragIndex, 1);
}
scope.$apply();
}
});
}
};
});
【问题讨论】：
-
您应该将指令可拖动到您希望可拖动的元素上，并将指令放置在您希望可放置的元素上。它们是什么元素并不重要。你到底想做什么？只需拖动一个元素？
-
@notme - 我有多个可拖动元素（它们在一个列表中），它们都可以放在一个目标 div 中（不是每 li 一个 div）。我无法让它在我粘贴的代码中工作。
-
您能添加更多代码吗？你能用不工作的代码创建一个 jsfiddle/plunker 吗？
标签： jquery-ui angularjs drag-and-drop