Safari 5.1 сломал HTML родной перетаскиванием?

Question

Прошлой ночью я подумал, что сделаю быстрый проект, чтобы продемонстрировать возможности HTML5 и опробовать некоторые вещи.Тем не менее, я не могу понять, как заставить перетаскивать работать в Safari, в то время как он прекрасно работает в Chrome и Firefox.Точнее, кажется, что событие сброса не запускается в Safari, когда вы пытаетесь перетащить изображение из веб-сайта в область перетаскивания.В то же время он срабатывает, когда вы перетаскиваете файл с рабочего стола.

Я не совсем уверен, но я вполне уверен, что когда я попробовал тот же скрипт на работе (где у меня Safari5.0.2 и т. Д.), Он запустил событие drop (собираюсь проверить его завтра, чтобы быть уверенным) и дал мне ожидаемые ошибки, связанные с FileReader.Но когда я только что установил Safari 5.1 на свой собственный компьютер, я получаю только перетаскивание, вход и выход из событий (и сбрасывание тоже, если файл был перетащен в браузер).

Я уже некоторое время гуглюи, кажется, не найти ни одного примера перетаскивания, который действительно работает в Safari 5.1.Даже образец в Safari не работает, не говоря уже о html5demo.com 1 и html5demo.com 2 .Это заставляет меня задуматься о том, есть ли в Safari ошибка или, возможно, они внедрили что-то обязательное, что не отражено в dev-center (последнее обновление в 2009 году).

Сценарий, который я пытаюсь исправитьнаходится на моем сайте (извините, ребята, нет проблем с определенным кодом для публикации, поскольку он, похоже, тоже не работает).

PS!Я мог внести некоторые ошибки в свой собственный сайт, отчаянно пытаясь исправить перетаскивание в Safari, но я слишком устал, чтобы исправить их прямо сейчас.

ОБНОВЛЕНИЕ: Только что подтвердилна работе, что событие сброса происходит в Safari 5.0.2 на Mac OS X.

ОБНОВЛЕНИЕ 2: Также подтвердил, что все отлично работает с Safari 5.0.6 на Win 7,тот же компьютер, который выходит из строя с 5.1

Answer 1

Тестирование с Safari 5.1.7 Mac:

Чтобы увидеть событие drop, вы должны обработать событие dragover и вызвать event.preventDefault().

Вот (довольно интересная) дискуссия, где я нашел ответ:

http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html

Я не знаю, действительно ли это решает вопрос, потому что сайт аскера (по крайней мере на сегодняшний день) делает это.Он отлично работает на моей машине (как и демонстрационные страницы HTML5).Но это может помочь кому-то, кто придет в эту ветку с этой проблемой, кто не знает об этой довольно не интуитивной детализации реализации.

Answer 2

Я использую Safari 5.1.5 (7534.55.3) на ПК с Windows 7, который я только что установил на днях, никаких предыдущих установок Safari не было, и я не могу заставить работать какие-либо онлайн-демонстрации HTML5 drag-n-drop.

Я работаю над проектом с помощью drag-n-drop, и Modernizr говорит мне, что я хорош в Safari (Modernizr.draganddrop == true), но когда я на самом деле отбрасываю элемент, падениесобытие не запускается.

Я добавил отладку предупреждений и ничего.

Мои тесты показывают, что Safari 5.1.5 (7534.55.3) на компьютере с ОС Windows 7 не работает.Все остальные события перетаскивания, кажется, работают: драгстарт, драгенд, драгентер, драглайв, драговер.

Answer 3

Просто чтобы уточнить: посетил ваш сайт и не нашел ошибок. Открыл консоль, без ошибок, и все, казалось, работало, как задумано. Перепробовал все предоставленные примеры без ошибок.

Все примеры отлично работают Safari Версия 5.1 (7534.48.3). Извини, приятель. Может, ты изменил настройку?

Позвольте мне предложить возможность:

Перейдите к Safari -> Empty Cache... Затем Safari -> Reset Safari... Попробуйте перезагрузить страницу.

Вероятно, что-то кешируется, что создает конфликт. Кажется, в вашем сценарии нет ничего плохого.

Редактировать

Некоторые вещи, которые нужно проверить ...

Есть ли в именах ваших функций зарезервированные слова? Я сделал это, если бы он не выдавал никаких ошибок, но он просто не работал бы.

У меня были странные проблемы с тем, что Safari не запускал методы, написанные как funcName = function(){}. Если вы можете определить метод, который не запускается (я добавляю небольшую функцию при разработке под названием DBG, которую я добавлю ниже - в основном, если установлен флаг отладки, вы входите в консоль), вы можете попробуйте переписать функцию.

// Some sort of boolean flag.
var debug = true;

// This is kind of an obvious function, but can be expanded as you like.
// Little tricks to make life easier.
function DBG(str) {
  debug ? console.log(str) : return;
}

Я все еще думаю, что в конечном итоге это сводится к тому, что что-то неправильно кэшируется, но стоит попробовать.

Answer 4

Я столкнулся с похожими проблемами, событие drop, похоже, не запускается. Safari, очевидно, ожидает, что событие "dragover" также будет связано. Как только я добавил это, это сработало. Так что ... делюсь на случай, если это актуально.

Моя первая попытка:

$(document).bind 
  drop: (e) ->
    // This never gets fired in safari (does work in chrome)
    console.log e.originalEvent.dataTransfer.files
    false

Мое "исправление":

$(document).bind 
  dragover: (e) ->
    console.log e
    false
  drop: (e) ->
    // This does get fired (in chrome and safari)
    console.log e.originalEvent.dataTransfer.files
    false