Перетаскивание/капля - очень распространенная особенность. Вы можете взять объект и перетащить его в область, которую хотите разместить. Многие javascripts реализуют связанные функции аналогично, такие как компонент Draganddrop of jQueryui. В HTML5 выпадение перетаскивания становится стандартной работой, и любой элемент поддерживает его. Поскольку эта функция так распространена, все основные браузеры поддерживают эту операцию.
Включить свойство, способствующее сопротивлениюЭто очень просто. Просто измените атрибут перетаскивания элемента на перетаскиваемое, и этот элемент поддерживает перетаскивание, как показано ниже:
<imgdraggable = "true"/>
Передача данных при перетаскиванииВо время процесса перетаскивания нам часто необходимо передавать соответствующие логические данные для завершения процесса преобразования. Здесь мы в основном используем объект Datatransfer для передачи данных. Давайте сначала посмотрим на его членов:
Метод участники:
SetData (Format, Data): назначить перетаскиваемые данные объекту DataTransfer.
Формат: параметр строки, который указывает тип перетаскиваемых данных. Значениями этого параметра может быть текст (тип текста) и URL (тип URL). Этот параметр не зависит от случая, поэтому текст такой же, как текст.
Данные: параметр типа варианта, который определяет перетаскиваемые данные. Данные могут быть текстом, пути изображения, URL и т. Д.
Эта функция имеет возвращаемое значение логического типа. Истина означает, что данные успешно добавлены в Datatransfer, а False означает, что они неудачны. При необходимости этот параметр может быть использован, чтобы решить, следует ли продолжить некоторую логику.
getData (формат): получите данные перетаскивания, хранящиеся в Datatransfer.
Формат означает то же самое, что в SetData, а значения могут быть текстом (тип текста) и URL (тип URL).
ClearData (формат): удаляет данные указанного типа.
В дополнение к тексту (тип текста) и URL (тип URL), которые можно указать выше, формат здесь также может принимать следующие значения: файл файл, элемент HTML-HTML, изображение.
Этот метод можно использовать для избирательного обработки перетаскиваемых типов данных.
Атрибут участников :EffectAllowed: устанавливает или получает операцию, которую могут выполнять данные в элементе источника данных.
Тип атрибута - это строка, а диапазон значений выглядит следующим образом:
DATA COPY-COPAR.
Данные Link-Link.
Данные перемещения
copylink - копировать или ссылки данных, определяемые целевым объектом.
Copymove - копировать или перемещать данные, определяемые целевым объектом.
LinkMove - ссылка или перемещение данных, определяемые целевым объектом.
Все операции поддерживаются.
Ни один драг не запрещен.
Неинитированное - значение по умолчанию, принимает поведение по умолчанию.
Обратите внимание, что после настройки эффекта, спускаемого до ни одного, перетаскивание запрещено, но форма мыши все еще показывает форму объекта, который не может быть перетаскивается. Если вы хотите не отображать эту форму мыши, вам необходимо установить returnValue о событии события окна на false.
Dropeffect: устанавливает или получает допустимые операции на перетасной цели и соответствующей форме мыши.
Тип атрибута - это строка, а диапазон значений выглядит следующим образом :копировать форму мыши, когда она появляется как копия;
ссылка-мышь показана как форма соединения;
Движение-мышь появляется в виде движущейся формы.
Нет (по умолчанию) - мышь появляется как форма без перетаскивания.
EffectAllowed указывает операции, поддерживаемые источником данных, поэтому он обычно указывается в событии OnDragStart. Dropeffect указывает действия, подтверждаемые перетаскиванием цели, поэтому он обычно используется в таких событиях, как Ondragenter, Ondragover и Ondrop на перетащинной цели.
Файлы: возвращает список перетаскиваемых файлов FileList.
Типы: список типов данных, отправляемых в OnDragStart (Drag Data).
Существование объекта Datatransfer позволяет передавать логические данные между перетаскиваемым источником данных и целевым элементом. Обычно мы используем метод SetData для предоставления данных в событии OnDragStart элемента источника данных, а затем в целевом элементе мы используем метод GetData для получения данных.
События, вызванные перетаскиваниемНиже приведено событие, которое произойдет при перетаскивании и сбросе. По сути, порядок запуска событий является следующим порядком:
Dragstart: запускается, когда элемент для перетаскивания начинает перетаскивать. Этот объект события является перетаскиваемым элементом.
Перетащите: запускается при перетаскивании элемента, этот объект события является перетаскиваемым элементом.
Dragenter: запускается при перетаске элемента в целевой элемент. Этот объект события является целевым элементом.
Драгвер: запускается при перетаскивании элемента для перемещения целевого элемента. Этот объект события является целевым элементом.
Драглив: запускается при перетаскивании элемента от целевого элемента. Этот объект события является целевым элементом.
Отбросьте: запускается, когда перетанутый элемент помещается в целевой элемент. Этот объект события является целевым элементом.
Dragend: запускается после падения, что запускается при завершении сопротивления. Этот объект события является перетаскиваемым элементом.
По сути, событие параметра события будет проходить в соответствующих элементах, которые могут быть легко изменены. Здесь нам не нужно обращаться с каждым событием, нам обычно нужно только подключать несколько основных событий.
Событие DragstartПараметры, уходящие из этого события, содержат много информации, и вы можете легко получить перетаскиваемые элементы (event.target); Вы можете установить перетаскиваемые данные (event.datatransfer.setData); Таким образом, вы можете легко реализовать логику за сопротивлением (конечно, вы также можете передать другие параметры при привязке).
Во время перетаскивания - События Ondrag, Ondragover, Ondragenter и Ondraglave Объектом события Ondrag является элемент перетаскивания, и это событие обычно обрабатывается реже. Событие Ondragenter происходит при перетаскивании в текущий элемент, событие OnDragLeave происходит при перетаскивании из текущего элемента, и событие OnDragover происходит при перетаскивании в текущем элементе.Здесь только одна вещь, которую следует отметить, что по умолчанию браузер запрещает отказ от элементов, поэтому для того, чтобы элементы упали, вам необходимо вернуть False в этой функции или вызовать метод Event.preventDefault (). Как показано в следующем примере.
Перетаскивание - Ondrop, Ondragend EventКогда перетаскиваемые данные сброшены, событие Drop запускается. После того, как падение заканчивается, событие Dragend запускается, и это событие используется относительно меньше.
Давайте посмотрим на простой пример:
<! Doctypehtml>
<html>
<голова>
<scripttype = "text/javascript">
functionAllowDrop (ev) {
ev.preventdefault ();
}
functionDrag (ev) {
ev.datatransfer.setdata ("text", ev.target.id);
}
functionDrop (ev) {
vardata = ev.datatransfer.getdata ("text");
ev.target.appendchild (document.getelementbyid (data));
ev.preventdefault ();
}
</script>
</head>
<тело>
<divid = "div1" ondrop = "drop (event)" ondragover = "allowdrop (event)"> </div>
<imgid = "drag1" src = "img_logo.gif" draggable = "true" ondragstart = "drag (event)" width = "336" height = "69"/>
</body>
</html>
Файл перетаскиванияПриведенный выше пример использовал различные методы и свойства Datatransfer. Давайте посмотрим на другое интересное приложение в Интернете: перетащите изображение на веб -странице, а затем отобразите его на веб -странице. Это приложение использует свойство Files Datatransfer.
<! Doctypehtml>
<html>
<голова>
<metacharset = "UTF-8">
<title> html5 drang and drop file </title>
<style>
#Section {font-family: "Georgia", "Microsoft Yahei", "Китайская песня";}
.container {Display: Inline Block; Min-Height: 200px; min-width: 360px; цвет:#f30; Padding: 30px; граница: 3pxsolid#ddd; -moz-border-radius: 10px; -webkit-bord-radius: 10px; граница-радий: 10px;};};};};};};};
.preview {max-width: 360px;}
#files-list {position: absolute; top: 0; слева: 500px;}
#list {width: 460px;}
#list.preview {max-width: 250px;}
#listp {color:#888; font-size: 12px;}
#list.green {color:#09c;}
</style>
</head>
<тело>
<divid = "section">
<p> Перетащите изображение в контейнер ниже: </p>
<divid = "container" class = "container">
</div>
<divid = "files-list">
<p> Файлы, которые были перетаскиваны в: </p>
<ulid = "list"> </ul>
</div>
</div>
<Скрипт>
if (window.filereader) {
varist = document.getElementById ('List'),
cnt = document.getElementbyId ('intainer');
// судить, есть ли картина
функциональность (тип) {
Switch (type) {
case'image/jpeg ':
case'image/png ':
case'image/gif ':
case'image/bmp ':
case'image/jpg ':
returntrue;
по умолчанию:
returnfalse;
}
}
// Обработка списка файлов перетаскивания
functionhandlefileselect (evt) {
evt.stoppropagation ();
evt.preventdefault ();
varfiles = evt.datatransfer.files;
for (vari = 0, f; f = files [i]; i ++) {
vart = f.type? f.type: 'n/a',
reader = newFileReader (),
SIVERE = function (f, img) {
list.innerhtml+= '<li> <strong>'+f.name+'</strong> ('+t+
')-'+f.size+'bytes <p>'+img+'</p> </li>';
cnt.innerhtml = img;
},
iSimg = iSimage (t),
IMG;
// Обработка полученных изображений
if (iSimg) {
reader.onload = (function (thefile) {
returnfunction (e) {
img = '<imgclass = "preview" src = "'+e.target.result+'" title = "'+thefile.name+'"/>';
Взгляды (File, IMG);
};
}) (f)
reader.readasdataurl (f);
}еще{
img = '"o ((> ω <)) O", то, что вы отправили, не является картинкой! ! ';
Взгляды (F, IMG);
}
}
}
// обрабатывать вставку и затянуть эффект
functionHandledRagenter (evt) {this.setAttribute ('style', 'border-style: dephed;');}
functionHandledRagLeave (evt) {this.setAttribute ('style', '');}
// Обработка событий перетаскивания файлов для предотвращения перенаправления, вызванного событиями по умолчанию браузера
functionHandledRagover (evt) {
evt.stoppropagation ();
evt.preventdefault ();
}
cnt.addeventlistener ('Dragenter', обработчик, false);
cnt.addeventlistener ('Dragover', обработчик, false);
cnt.addeventlistener ('Drop', Handlefileselect, false);
cnt.addeventlistener ('dragleave', handledragleave, false);
}еще{
document.getElementById ('section'). innerHtml = 'Ваш браузер не поддерживает его, одноклассник';
}
</script>
</body>
</html>
В этом примере используется API считывания файлов в HTML5: объект FileReader; Этот объект предоставляет следующий асинхронный метод для чтения файлов:
1.FileDeader.ReadAsBinaryString (FileBlob)
Прочтите файл в двоичном режиме, атрибут результата будет содержать двоичный формат файла
2.fileDeader.ReadaStext (FileBlob, OPT_ENCODING)
Прочитайте файл в текстовом режиме. Атрибут результата будет содержать текстовый формат файла. Параметр декодирования по умолчанию-UTF-8.
3.fileDeader.readasDataurl (файл)
Чтение результата файла в форму URL будет содержать формат DataIrl файла (изображения обычно такие).
Когда файл считывается с помощью приведенного выше метода, будут запускаются следующие события:
OnloadStart, OnProgress, Onabort, Onerror, Onload, OnloadEnd
Эти события очень просты, просто подключитесь, когда это необходимо. См. Пример следующего кода:
functionStarTread () {
// Получить InputElementHORPDOMD
varfile = document.getElementbyId ('file'). файлы [0];
if (file) {
getaStext (файл);
}
}
functionGetaStext (readfile) {
varreder = newFileDeader ();
// readfileintomoryasutf-16
reader.ReadASTEXT (readFile, "UTF-16");
// Руководство, успех, Андерроры
reader.onprogress = updateProgress;
reader.onload = загружен;
reader.onerror = errorhandler;
}
functionupdateprogress (evt) {
if (evt.lengthcomputable) {
//evt.loadedAndevt.totalareProgresseventProperties
varulated = (evt.loaded/evt.total);
if (загружен <1) {
// Увеличивание
//Style.width=( загружено*200)+"px ";
}
}
}
функция загружена (evt) {
// gatethereadfiledata
varfileString = evt.Target.Result;
// handleutf-16filedump
if (utils.regexp.ischinese (fileString)) {
// ChineseCharacters+namevalidation
}
еще{
// runotherCharsetTetest
}
//xhr.send(fileString)
}
functionErrorHandler (evt) {
if (evt.target.error.name == "notReadableer") {
// fefile может быть номинал
}
}
Позвольте мне кратко рассказать об этом здесь: обычная загрузка файла использует метод Window.open, например:
window.open ('http://aaa.bbbb.com/ccc.rar','_blank')
Практическая ссылка: Официальный документ: http://www.w3schools.com/html5/Хороший учебный веб -сайт: http://html5.phphube.com/html5/features/drapanddrop/
Справка MSDN: http://msdn.microsoft.com/en-us/library/ms535861(v=vs.85).aspx
Подробное описание перетаскивания файлов: http://www.html5rocks.com/zh/tutorials/file/dndfiles/
Перетащите и загрузите файл: http://www.chinaz.com/design/2010/0909/131984.shtml
Полный пример перетаскивания файлов и выпадает: http://www.vevb.com/liaofeng/archive/2011/05/18/2049928.html
Пример загрузки файла: http://hi.baidu.com/guo_biru/item/2d7201c012b6debd0c0a7b05
Window.open Guide: http://www.vevb.com/liulf/archive/2010/03/01/16755511.html
window.open Параметр: http://www.koyoz.com/blog/?action=show&id=176