it-roy-ru.com

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

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

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

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

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

28
jordi

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

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

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


Правка:

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

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

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

16
Tauren

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

Это поможет вам так далеко. Когда дело доходит до перетаскивания между окнами, вещи становятся вонючими. Проблема в том, что, опять же, между браузерами нет большой согласованности. Откройте кучу разных браузеров, а затем откройте этот отличный пример . Выберите первый переключатель 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. Вам не повезло. Покажите пользователю неподдерживаемое сообщение и попросите его предоставить изображение другим способом. 
6
acarlon

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

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

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

4
Demelziraptor

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

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

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

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

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

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

1
dlo

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

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

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

0
dkris

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

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

0
Daniel X Moore