jquery ui - Arrastra y suelta en AngularJS

jquery-ui drag-and-drop

Question

Estoy intentando implementar Arrastrar y soltar usando la implementación de la interfaz de usuario jQuery de c0deformer (ver aquí: http://codef0rmer.github.io/angular-dragdrop/#/ ) La parte de arrastre funciona bien, pero parece que no puedo obtener la funcionalidad Estoy detrás en términos de la caída. En esta aplicación, quiero poder colocar los elementos arrastrables en cualquier lugar dentro de un div de destino, es decir, no quiero que el alcance de destino se limite a una estructura de tipo lista (o un conjunto de divs repetidos). Principalmente esto se debe a que el usuario arrastrará elementos sobre la marcha y no habrá forma de saber cuántos elementos arrastrará y soltará el usuario con anticipación.

He recorrido la web y no puedo encontrar un ejemplo en Angular que use arrastrar y soltar sin arrastrar efectivamente de una lista a otra. Se puede hacer esto? Si es así, no estoy seguro de cómo actualizaría adecuadamente el alcance después de que se haya arrastrado un elemento. En este código de ejemplo a continuación, los elementos descartados se insertan en el alcance de una segunda lista y se aplica el nuevo ámbito. Idealmente, el alcance de los elementos descartados es el div de destino que mencioné anteriormente. Soy realmente nuevo en Angular, por lo que cualquier consejo es inmensamente apreciado.

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

Answer 1

Hace poco creé una directiva angular para arrastrar y soltar que no depende de jquery-ui. Utiliza la aplicación de arrastrar y soltar html5. Tampoco tiene requisitos sobre el formato de los datos que se arrastrarán o soltarán, simplemente configura un gancho para que se le notifique cuando un elemento se arrastra a otro.

Publique aquí: http://jasonturim.wordpress.com/2013/09/01/angularjs-drag-and-drop/

Demostración aquí: http://logicbomb.github.io/ng-directives/drag-drop.html