wirklich leid, etwas zu posten, die & unterstreichen spezifische, aber die Art, wie ich das Problem (HTML5-Spezifikation arbeitet auf Chrom) gelöst Winkel ist sollte beobachten leicht zu.
.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);
});
}
};
})
Ich verwende eine Liste der Elemente darzustellen, die eine Drag eingeben Ereignis ausgelöst haben. Wenn ein Drag-Leave-Ereignis eintritt, finde ich das Element in der Drag-Enter-Liste, das übereinstimmt, entferne es aus der Liste, und wenn die resultierende Liste leer ist, weiß ich, dass ich es aus dem Dokument/Fenster gezogen habe.
Ich muss die Liste mit gezogenen Elementen zurücksetzen, nachdem ein Drop-Ereignis eintritt, oder das nächste Mal, wenn ich etwas ziehe, wird die Liste mit Elementen aus der letzten Drag & Drop-Aktion gefüllt.
Ich habe dies bisher nur auf Chrom getestet. Ich habe dies gemacht, weil Firefox und Chrome verschiedene API-Implementierungen von HTML5 DND haben. (Ziehen und Ablegen).
wirklich hoffe, dass dies einigen Menschen hilft.
Neben den Antworten unter: bemerkte ich, dass die Abfolge der Ereignisse zumindest unter Chrom ist: ENTER ENTER VERLASSEN ENTER VERLASSEN ... VERLASSEN was bedeutet, wenn Sie Zählung halten von Ein- und Ausgängen kann man zwischen der initialen Eingabe und den internen Enter/Leave-Sequenzen unterscheiden PS: Entschuldigung für die satte Formatierung ... –
Du bist der Mann @MartinWawrusch! Danke für das – aceofspades