HTML5 перетаскивание между окнами

Question

есть ли в любом случае функция перетаскивания HTML5 или / и API-интерфейс файла для перетаскивания изображения jpg из одного окна в другое?

Идея состоит в том, что я могу перетаскивать изображение из Facebook в другоеокно браузера с пользовательским HTML, который получит это изображение.

Или, по крайней мере, способ перетащить с рабочего стола в браузер?

Большое спасибо

Answer 1

Не уверен насчет между окнами, но, конечно, с рабочего стола:

http://studio.html5rocks.com/#Photos

На самом деле, посмотрите полный html5rocks.com сайт с идеями.

---

EDIT:

Я только что открыл эту демонстрацию в двух отдельных окнах браузера и могу перетаскивать из одного окна в другое. Мне также удалось перетащить миниатюру из Facebook и поместить ее в зону добавления.

Однако изображение Facebook было отброшено как «неизвестно». Похоже, вы можете перейти с одного сайта на другой, но я не уверен, что именно на самом деле удаляется. Если вы перетаскиваете из Facebook или чего-то подобного, Facebook может потребоваться, чтобы для изображений или элементов было установлено свойство draggable или что-то еще, что может прочитать ваше приложение.

Суть в том, что вы должны быть в состоянии заставить его работать между приложениями, которые вы контролируете. Но если вы пытаетесь интегрировать его с внешними приложениями, вам нужно будет поэкспериментировать, чтобы выяснить, что именно передается во время перетаскивания. Я не сделал эту работу сам, но это не должно быть трудно.

Answer 2

Это старый, но так как я недавно боролся с ним, и в этом есть нечто большее, чем вы могли подумать, я вставил ответ. В качестве введения, чтобы узнать о нативных методах, обратитесь к этому сайту .

Это так далеко.Когда дело доходит до перемещения между окнами, все становится вонючим.Проблема заключается в том, что между браузерами нет большой последовательности.Откройте кучу разных браузеров, а затем откройте отличный пример .Выберите первый переключатель getData('Text') и проверьте перетаскивание изображений.Первое, что вы заметите, это то, что в некоторых случаях getData ('Text') содержит URL-адрес, но не URL-адрес изображения.Итак, теперь выберите переключатель getData(e.dataTransfer.types[0]) based on detected content type.В зависимости от того, какой браузер вы выберете, вы заметите, что некоторые типы содержат URL-адрес изображения, но у каждого браузера есть разные типы.На момент написания этой статьи некоторые браузеры (Internet Explorer) не имели типов, которые имеют URL-адрес изображения.Вот почему, если вы откроете изображения Google в Internet Explorer и попробуете этот поиск с помощью перетаскивания, ничего не произойдет - поле «drop here» не появится.

Итак, лучшее, что я придумал, - это (убедитесь, что вы ссылаетесь на эти ссылки выше, иначе вы не будете знать, о чем я): -

1. Проверкаe.dataTransfer.files.Если есть файлы, то все хорошо.Это скорее всего капля с локального компьютера.Если нет, перейдите к шагу 2.

2. Выполните цикл по getData(e.dataTransfer.types[0]) и передайте URL регулярному выражению, которое проверяет строку, содержащую URL изображения.Что-то вроде:

   RegExp( 'http://(.(?!http://))+?(?:[.]jpg|[.]jpeg|[.]png|[.]gif|[.]tiff|[.]ico)', 'gmi' )
   

   Если вы найдете совпадение, тогда все хорошо.Делайте все, что хотите, например, переходите на сервер для получения изображения.Если нет, перейдите к шагу 3.

3. Попробуйте getData('Text').Если вы найдете совпадение, то хорошо.Перейдите на сервер и т. Д. Если нет, перейдите к шагу 4.
4. Вам не повезло.Покажите пользователю неподдерживаемое сообщение и попросите его предоставить изображение другим способом.

Answer 3

Если вы используете jQuery, вы можете посмотреть на это: https://github.com/blueimp/jQuery-File-Upload/wiki/Drag-and-drop-uploads-from-another-web-page

На странице about:
Он работает, отправляя запрос JSONP с URL-адресом изображения на серверы Google через Google App Engine1. Затем сервер преобразует изображение в URL-адрес данных в кодировке base64 и отправляет изображение обратно в виде объекта JSON. Это означает, что изображение может быть локально включено на веб-сайт, и поэтому оно может быть отредактировано тегом canvas.

Я еще не пробовал, но скоро посмотрю!

Answer 4

* получение url из перетаскиваемого изображения, 100% нормально для Firefox и Chrome *

$('#element').bind('drop', function (e) {
    alert($($.trim($(e.originalEvent.dataTransfer.getData('text/html')).html())).attr('src'));
});

Answer 5

Я знаю, что вы можете очень легко получить URL изображения, которое было перетащено: myDataTransfer.getData ( "Текст")

но до сих пор я не смог найти способ извлечения данных базового изображения, не нарушив междоменную безопасность JavaScript ... вы не можете получить изображение с помощью ajax, и вы не можете использовать холст как посредник.

К сожалению, похоже, что в большинстве случаев само перетаскивание (то есть объект dataTransfer) не содержит данных изображения. Я говорю «в большинстве случаев», потому что перетаскивания из одного и того же браузера не происходит, но когда я перетаскивал из окна Firefox в окно Chrome, он, похоже, включал в себя какое-то растровое изображение, но в каком-то необычном формате (возможно, Windows вещь).

Единственное, на что нужно обратить внимание - это функции браузера, такие как «application / x-moz-nativeimage», но я не вижу подобного свойства, прикрепленного к объекту dataTransfer в Chrome.

Answer 6

В Chrome вы можете использовать Копировать / Вставить, вам нужно будет скопировать изображение, щелкнув правой кнопкой мыши и выбрав «Копировать изображение», затем вы можете вставить его на другую страницу, которая обрабатывает вставку событий с помощью Ctrl + V.

Вот демоверсия, иллюстрирующая принцип: http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

Answer 7

Вот пример перетаскивания файла с использованием HTML5. Кажется, это не работает из одного окна браузера в другое (рабочий стол-> браузер работает). Но вы можете использовать это как ссылку.

это эксперимент с использованием веб-идентификатора для создания формы HTML5.

http://www.mattiasdanielsson.se/2010/building-innovative-login-html5-filereader/