realmente lo siento a publicar algo que es angular & subrayan específica, sin embargo, la forma en que resolvió el problema (especificación HTML 5, que funciona en el cromo) debe ser fácil de observar.
.directive('documentDragAndDropTrigger', function(){
return{
controller: function($scope, $document){
$scope.drag_and_drop = {};
function set_document_drag_state(state){
$scope.$apply(function(){
if(state){
$document.context.body.classList.add("drag-over");
$scope.drag_and_drop.external_dragging = true;
}
else{
$document.context.body.classList.remove("drag-over");
$scope.drag_and_drop.external_dragging = false;
}
});
}
var drag_enters = [];
function reset_drag(){
drag_enters = [];
set_document_drag_state(false);
}
function drag_enters_push(event){
var element = event.target;
drag_enters.push(element);
set_document_drag_state(true);
}
function drag_leaves_push(event){
var element = event.target;
var position_in_drag_enter = _.find(drag_enters, _.partial(_.isEqual, element));
if(!_.isUndefined(position_in_drag_enter)){
drag_enters.splice(position_in_drag_enter,1);
}
if(_.isEmpty(drag_enters)){
set_document_drag_state(false);
}
}
$document.bind("dragenter",function(event){
console.log("enter", "doc","drag", event);
drag_enters_push(event);
});
$document.bind("dragleave",function(event){
console.log("leave", "doc", "drag", event);
drag_leaves_push(event);
console.log(drag_enters.length);
});
$document.bind("drop",function(event){
reset_drag();
console.log("drop","doc", "drag",event);
});
}
};
})
utilizo una lista para representar los elementos que han desencadenado un lastre para entrar evento. cuando ocurre un evento de parada de arrastre, encuentro el elemento en la lista de arrastre que coincide, lo elimino de la lista, y si la lista resultante está vacía, sé que he arrastrado fuera del documento/ventana.
Necesito restablecer la lista que contiene elementos arrastrados después de que ocurre un evento de caída, o la próxima vez que empiezo a arrastrar algo la lista se completará con elementos de la última acción de arrastrar y soltar.
Solo he probado esto en Chrome hasta el momento. Hice esto porque Firefox y Chrome tienen diferentes implementaciones de API de DND de HTML5. (arrastrar y soltar).
realmente espero que esto ayude a algunas personas.
Además de las respuestas a continuación: Me di cuenta de que por lo menos en cromo de la secuencia de eventos es: ENTER ENTER LICENCIA ENTER LICENCIA ... LICENCIA lo que significa que si se mantiene el recuento de entradas y salidas podrá diferenciar entre la entrada inicial y las secuencias internas de entrada/salida PD: Perdón por el formato harto ... –
¡Eres el hombre @MartinWawrusch! Gracias por este – aceofspades