Safari 5.1 нарушил встроенный HTML-перетаскивание?

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

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

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

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

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

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

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

Ответ 1

Тестирование с помощью Safari 5.1.7 Mac:

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

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

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

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

Ответ 2

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

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

Я добавил дополнительную отладку и ничего.

Мое тестирование показывает, что Safari 5.1.5 (7534.55.3) на событии для ПК с Windows 7 нарушено. Все остальные события перетаскивания, похоже, работают: dragstart, dragend, dragenter, dragleave, dragover.

Ответ 3

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

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

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

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

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

Edit

Некоторые вещи для проверки...

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

У меня были некоторые странные проблемы, когда 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;
}

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

Ответ 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