Do mojej strony dodaję narzędzie do przesyłania i przeciągania HTML5.
Po upuszczeniu pliku do obszaru przesyłania wszystko działa świetnie.
Jeśli jednak przypadkowo upuszczę plik poza obszar przesyłania, przeglądarka ładuje plik lokalny tak, jakby to była nowa strona.
Jak mogę temu zapobiec?
Dzięki!
javascript
jquery
html
drag-and-drop
Travis
źródło
źródło
Odpowiedzi:
Możesz dodać detektor zdarzeń do okna, które wywołuje
preventDefault()
wszystkie zdarzenia przeciągania i upuszczania.Przykład:
źródło
dragover
idrop
programy obsługi są potrzebne, aby przeglądarka nie załadowała upuszczonego pliku. (Chrome najnowszy 2015/08/03). Rozwiązanie działa również w najnowszej wersji FF.<input type="file" />
. Konieczne jest sprawdzenie, czye.target
jest to plik wejściowy i przepuszczenie takich zdarzeń.Po wielu zabawach odkryłem, że jest to najbardziej stabilne rozwiązanie:
Ustawienie obu
effectAllow
idropEffect
bezwarunkowo w oknie powoduje, że moja strefa zrzutu nie akceptuje już dnd, niezależnie od tego, czy właściwości są ustawione jako nowe czy nie.źródło
W przypadku jQuery poprawną odpowiedzią będzie:
Tutaj
return false
będzie się zachowywać jakevent.preventDefault()
ievent.stopPropagation()
.źródło
Aby zezwolić na przeciąganie i upuszczanie tylko niektórych elementów, możesz zrobić coś takiego:
źródło
Spróbuj tego:
źródło
Domyślnie zapobieganie wszystkim operacjom przeciągania i upuszczania może być inne. Możliwe jest sprawdzenie, czy źródło przeciągania jest plikiem zewnętrznym, przynajmniej w niektórych przeglądarkach. W tej odpowiedzi StackOverflow umieściłem funkcję sprawdzania, czy źródło przeciągania jest plikiem zewnętrznym .
Zmieniając odpowiedź Digital Plane, możesz zrobić coś takiego:
źródło
e || event;
? Gdzie jestevent
zdefiniowane? Nieważne. Wygląda na to, że jest to obiekt globalny w IE? Znalazłem ten cytat"In Microsoft Visual Basic Scripting Edition (VBScript), you must access the event object through the window object."
tutajZ mojego doświadczenia wynika, że problem ten pojawia się po raz pierwszy po dodaniu funkcji upuszczania plików na stronie. Dlatego uważam, że składnik, który to dodaje, powinien również odpowiadać za zapobieganie wypadaniu poza strefę zrzutu.
W moim rozwiązaniu strefa zrzutu jest wejściem z klasą, ale każdy jednoznaczny selektor działa.
Detektory są dodawane / usuwane automatycznie, gdy komponent jest tworzony / niszczony, a inne komponenty korzystające z tej samej strategii na tej samej stronie nie kolidują ze sobą z powodu stopPropagation ().
źródło
Aby skorzystać z metody „sprawdź cel” opisanej w kilku innych odpowiedziach, oto bardziej ogólna / funkcjonalna metoda:
Nazywany jak:
źródło
function preventDefaultExcept(...predicates){}
. A potem użyj go jakpreventDefaultExcept(isDropzone, isntParagraph)
Mam HTML
object
(embed
), który wypełnia szerokość i wysokość strony. Odpowiedź @ digital-plane działa na zwykłych stronach internetowych, ale nie, jeśli użytkownik wpadnie na osadzony obiekt. Potrzebowałem więc innego rozwiązania.Jeśli przejdziemy do fazy przechwytywania zdarzeń , możemy uzyskać zdarzenia, zanim obiekt osadzony je odbierze (zwróć uwagę na
true
wartość na końcu wywołania detektora zdarzeń):Korzystając z następującego kodu (na podstawie odpowiedzi @ digital-plane) strona staje się celem przeciągania, zapobiega osadzaniu obiektów przez obiekty, a następnie ładuje nasze obrazy:
Testowane na Firefox na Macu.
źródło
Używam selektora klasy do wielu obszarów przesyłania, więc moje rozwiązanie przybrało mniej czystą formę
Na podstawie odpowiedzi Axela Amthora, w zależności od jQuery (alias do $)
źródło