Отключить перетаскивание образа файловой системы в браузер.

Question

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

Мне интересно, есть ли способ предотвратить такое поведение?Я пробовал stopPropagation / protectDefault для события ondrop, которое работает несколько, однако оставляет курсор «перетаскивания» на месте, создавая впечатление, что изображение может быть пропущено в любом месте на странице.

В идеале вы бы видели курсор «перетаскивания» только в обозначенной области, где изображения должны быть отброшены.

Answer 1

Объект dataTransfer имеет свойства dropEffect и effectAllowed. Не совсем уверен, какая разница между ними, но установка обоих на «none» должна помочь.

$(document).bind({
   dragenter: function (e) {
      e.stopPropagation();
      e.preventDefault();
      var dt = e.originalEvent.dataTransfer;
     dt.effectAllowed = dt.dropEffect = 'none';
   },
   dragover: function (e) {
      e.stopPropagation();
      e.preventDefault();
      var dt = e.originalEvent.dataTransfer;
      dt.effectAllowed = dt.dropEffect = 'none';
   }
});

См. http://jsfiddle.net/andreymir/H3RR7/embedded/result/ - падение разрешено только для прямоугольника.

Answer 2

Возможно, это то, что вы ищете? Я разработал это сам.

http://rightandrong.info/html5upload/Upload.html