Функция перетаскивания в HTML5 | карточка для убеждения в навыках каждый день

внешний интерфейс HTML
Функция перетаскивания в HTML5 | карточка для убеждения в навыках каждый день

Привет всем, яКороль Демонов Нэчжа, приятно познакомиться~~

Жизненное кредо Нэчжи:Если вам нравится то, что вы изучаете, у вас будет сильная мотивация.

Изучая программирование каждый день, вы будете в шаге от своей мечты. Спасибо каждому программисту, который любит программирование. Какими бы замечательными ни были ваши знания, пойдемте со мной, чтобы успокоить это блуждающее сердце, продолжайте, давай,2021Ну давай же! Добро пожаловать, чтобы подписаться и добавить меняvx:xiaoda0423, добро пожаловать, лайкайте, добавляйте в избранное и комментируйте

Не бойтесь мечтать, но не просто мечтайте, будьте деятелем, а не болтуном, и делайте все возможное.Голосуйте за Короля Демонов Нэчжу, спасибоНе забудьте проголосовать за меня! ! ! (Король Демонов Нэчжа)

предисловие

Если эта статья вам поможет, ❤️Подпишитесь+Нравится❤️Поддержите автора, вы приняли вызов? Публичный аккаунт статьи публикуется впервые, обратите вниманиеПрограммист ДораэмонПолучите последние статьи в первый раз

Пополнение ❤️~

Точка знаний

Вам понравился опыт перетаскивания?HTML5Ранее события можно было использоватьmousedown，mousemove，mouseupУмело реализуйте операцию перетаскивания страницы, но обратите вниманиеОбъем операций перетаскивания ограничен браузером.

а такжеHTML5перетащитьAPIФункциональность напрямую обеспечивает перетаскивание, а область перетаскивания выходит за границы браузера.HTML5Документы предоставленыapiПоддерживает перетаскивание нескольких файлов и загрузку.

научиться владетьhtml5перетащитеapiи файлapi, событие перетаскивания курсора, изwebДоступ к локальной файловой системе на веб-странице.

перетащите API

существуетhtml5перетащитеapiОсновные моменты:

Во-первых, для элементов страницы предусмотрена функция перетаскивания;

Во-вторых, добавьте событие перетаскивания для курсора;

В-третьих, предоставляет метод хранения данных перетаскивания.DataTransferобъект

перетаскиваемое свойство

draggableАтрибут используется для определения того, позволяет ли элемент пользователю перетаскивать: предоставляются три значения.

true,false,auto

Сделайте элемент перетаскиваемым:

<div draggable="true"></div>

imgэлементы иaЭлементы по умолчанию перетаскиваются

Событие перетаскивания курсора

существуетhtml57 событий курсора, связанных с перетаскиванием, предоставляются в:

В хронологическом порядке:

Во-первых, событие, срабатывающее при начале перетаскивания, роль событияОбъект является перетаскиваемым элементом-dragstartмероприятие

Во-вторых, событие, вызванное во время процесса перетаскивания, роль событияОбъект является перетаскиваемым элементом-dragмероприятие

В-третьих, элементы в режиме перетаскиванияЗапускается при входе в область действия этого элементаРоль объекта событияЭлементы, над которыми проходит курсор во время перетаскивания-dragenterэлемент

В-четвертых, перетащите элементпри перемещении в рамках этого элементаСрабатывает, объект событияЭлементы, над которыми проходит курсор во время перетаскивания-dragoverэлемент

В-пятых, перетащите элементПри выходе из области действия этого элементаСрабатывает, объект событияКурсор проходит во время перетаскиванияэлемент-dragleaveэлемент

В-шестых, перетащите элементЗапускается при перетаскивании в этот элемент, объект событияПеретащите целевой элемент-dropэлемент

В-седьмых, в операции перетаскиванияКогда это закончитсяСрабатывает, объект событияперетаскиваемый элемент-dragendмероприятие

Объект передачи данных

существуетhtml5предоставлено вDataTransferОбъект, используемый для поддержки хранения данных перетаскивания.

Обмен данными во время перетаскивания.

DataTransferОбъект:

Атрибуты

Первый,dropEffectатрибут: используетсяустановить или получить перетаскиваниеТип операции и доотображаемый курсорТипы.

Если эффект от этой операции такой же, как и изначально установленныйeffectAllowedЕсли эффект не совпадает, операция перетаскивания завершается неудачно. Его можно установить и изменить, а включенное значение может быть:none, copy, link, move

второй,effectAllowedАтрибут: используется для установки или получения исходного элемента, что операция передачи данных может быть применена к объекту операции, укажите значение:none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized

в третьих,typeсвойство: добраться доdragstartФормат, в котором хранятся данные для элемента при срабатывании события, если это перетаскивание внешнего файла, он вернетFiles.

четвертый,filesсвойства: храниться вDataTransferСписок файлов, которые перетаскиваются в объектFileList, вы можете использовать метод массива для обхода.

метод

Первый,clearData()метод: очиститьDataTransferДанные, хранящиеся в объекте:

clearData([sDataFormat])

[sDataFormat]необязательный параметр, возможные значения:Text,URL,File,HTML,Image,После установки данные в указанном формате могут быть удалены, если этот параметр опущен, все данные будут удалены.

второй,setData()Метод: в памятьDataTransferОбъект добавляет данные в указанном формате:

setData([sDataFormat],[data])

в третьих,getData()метод: по памятиDataTransferполучить данные с объекта

getData([sDataFormat])

четвертый,setDragImage()Метод: настроить картинку так, чтобы она следовала за движением курсора при перетаскивании.

setDragImage([imgElement],[x],[y])

[imgElement]представляет объект изображения,[x],[y]Представляет абсциссу и ординату относительно позиции курсора соответственно.

пятый,addElement()Метод: добавьте элементы, которые перетаскиваются вместе. Если вы хотите, чтобы элемент перетаскивался вместе с перетаскиваемым элементом, используйте этот метод.

addElement([element])

[element]Представляет объекты элементов, которые следуют за перетаскиванием вместе

Пример

// 源元素
<div id="dragSource" draggable="true">
 拖动
 <img src="images/dadaqianduan.png" width="50" height="50">
</div>

// 目标元素
<div id="dropTarget"></div>

Добавить кondragstartСлушайте события и добавляйте к перетаскиваемому исходному элементуondragstartПрислушивайтесь к событиям и добавляйте содержимое исходного элемента к исходному элементу при запуске события.dataTransferв объекте.

Наконец, добавьте функцию-обработчик, которая прослушивает событие.DragStart()добавить кwindow.onloadв случае.

function DragStart() {
 var source = document.getElementById("dragSource"); // 拖放源元素
 // 监听dragstart事件，作用在源元素上
 source.addEventListener("dragstart", function(e){
  e.dataTransfer.setData('text/plain', e.target.innerHTML);
  // 向dataTransfer对象中追加数据
  e.dataTransfer.effectAllowed="copy";
 },false);
}
// 添加函数DragStart到window.onload监听事件
window.addEventListener("load",DragStart,false);

Добавить кdragoverПрослушайте событие и добавьте к перетаскиваемому целевому элементуdragoverПрислушивайтесь к событиям, изменяйте стиль целевого элемента при запуске события и блокируйте обработку событий браузером по умолчанию.

Добавьте обработчик события слушателяDragOver()добавить кwindow.onloadсобытие для целевого элементаpreventDefault(), необходимо отменить обработку браузером по умолчанию, иначе функция перетаскивания реализована не будет.

function DragOver() {
// 拖放目标元素
 var target = document.getElementById('dropTarget');
 // 监听dragover事件，作用在目标元素上
 target.addEventListener("dragover", function(e){
 // 改变样式
  this.className = "dragover";
  // 取消浏览器的默认处理
  e.preventDefault();
 },false);
}
// 添加函数DragStart到window.onload监听事件
window.addEventListener("load", DragOver, false);

Добавить к перетаскиваемому целевому элементуondropСлушайте событие, получайте его, когда событие срабатываетdataTransferДанные в объекте добавляются к целевому элементу, и стиль восстанавливается.

Добавьте обработчик события слушателяDrop()добавить кwindow.onloadв случае.

function Drop(){
// 拖放目标元素
 var target = document.getElementById('dropTarget');
 // 监听drop事件，作用在目标元素上
 target.addEventListener('drop',function(e){
  var data = e.dataTransfer.getData('text/plain');
  //取得dataTransfer对象中的数据
  this.innerHTML += data;
  e.dataTransfer.dropEffect = "copy";
  // 还原样式
  this.className=""
 },false);
}
// 添加函数DragStart到window.onload监听事件
window.addEventListener("load",Drop, false);

файл API

существуетhtml5предоставлено вфайл API о файловых операциях, программновыбор и доступданные файла.

Такие как:FileListобъект,Fileобъект,Blobинтерфейс,FileReaderинтерфейс

Добавлены функции тегов

существуетhtml5серединаfileДобавлены типы элементов формыmultipleхарактеристики иacceptхарактеристика

несколько функций

multipleФункция позволяет пользователям выбирать несколько загружаемых файлов одновременно.

<input type="file" multiple/>

получить одинFileListобъект, представляет собойFileсписок объектов

принять функцию

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

<input type="file" accept="image/gif"/>

Объект FileList и объект File

существуетFileListКаждый файл в объекте снова являетсяFileобъект

Пример:

<form action="" method="post">
 <input type="file" id="files" multiple/>
 <input type="button" value="显示文件" onclick="showFiles()"/>
 <p id="msg"></p>
</form>

function ShowFiles(){
// 获取FileList对象
 var fileList = document.getElementById("files").files;
 var msg = document.getElementById("msg");
 var file;
 for(var i=0; i<fileList.length; i++){
  file = fileList[i];
  msg.innerHTML += file.name + ";<br/>";
 }
}

Объект большого двоичного объекта

Blobпредставление объектанеобработанные двоичные данные,ДолженBlobИнтерфейс имеет два свойства:размер и тип

Во-первых, атрибут size, представляющий длину объекта Blob в байтах, можно использовать с помощью

Интерфейс FileReader считывает двоичные данные объекта Blob или 0, если объект Blob не имеет байтов.

Во-вторых, атрибут type, который представляет объект Blob.MIMEтип, неизвестный тип, возвращает пустую строку.

В-третьих, метод slice(), который можно использовать для вырезания файлов и возврата нового объекта Blob.

Файловые объекты и объекты Blob

Объект File наследует объект Blob, поэтому объект File также может использовать свойства и методы объекта Blob (объект File может использовать свойства размера и типа).

Получить размер и тип файла

Пример:

<form action="" method="post">
 <input type="file" id="files" multiple accept="image/*"/>
 <input type="button" value="显示文件数据" onclick="ShowType()"/>
 <p id="msg"></p>
</form>

function ShowType(){
// 获取FileList对象
 var files = document.getElementById("files").files;
 var msg = document.getElementById("msg");
 var file;
 for(var i=0; i<files.length; i++){
  file=fileList[i];
  msg.innerHTML += "字节长度："+file.size+";<br/>";
  msg.innerHTML += "文件类型："+file.type+";<br/>";
 }
}

Интерфейсная карта FileReader

Интерфейс FileReader предоставляет некоторыеКак прочитать файла такжеВолна любви читает результатымодель события.

Интерфейс FileReader в основном считывает файл в память и считывает данные из файла.

Заранее определите, поддерживает ли его браузер, и реализуйте интерфейс FileReader.

if(typeof FileReader == "undefined"){
 console.log();
} else {
 var reader = new FileReader();
}

Интерфейс FileReader имеет три свойства:

  1. Возвращает статус прочитанного файла
  2. данные
  3. Ошибка при чтении

свойство readyState, только для чтения

Прочитайте статус файла:

  1. EMPTYP, со значением 0, что указывает на новыйFileReaderСостояние по умолчанию, когда интерфейс создан и методы чтения не вызывались.
  2. LOADING, значение которого равно 1, указывает, что метод чтения файла считывает объект File или объект Blob, и ошибок не возникло.
  3. DONE, значение равно 2, что указывает на окончание чтения файла, возможно, весь объект File или объект Blob был полностью прочитан в память, в процессе чтения файла возникает ошибка, или в процессе чтения используется метод abort() принудительно прерывать.

свойство результата, только для чтения

Получить данные файла, которые были прочитаны. Если это изображение, оно вернет данные изображения в формате base64.

свойство ошибки, только для чтения

Получение ошибок при чтении файла: 4 типа

  1. NotFoundError, не удалось найти прочитанный файл ресурсов.

Интерфейс FileReader вернет ошибку NotFoundError, а метод чтения файла также выдаст исключение ошибки NotFoundError.

  1. SecurityError, произошла ошибка безопасности.

Интерфейс FileReader вернет ошибку SecurityError, а метод чтения файла также выдаст исключение ошибки SecurityError.

  1. NotReadableError, нечитаемая ошибка.

Интерфейс FileReader вернет ошибку NotReadableError, а метод чтения файла также выдаст исключение ошибки NotReadableError.

  1. EncodingError, ошибка ограничения кодирования.

обычно данныеURLПредставленный URL-адрес ограничен по длине

Методы интерфейса FileReader

Во-первых, метод readAsArrayBuffer() считывает файл какбуфер массива

readAsArrayBuffer(<blob>);

один из них<blob>означаетBlobобъектный файл.

Метод readAsArrayBuffer() будет читать файл объекта Blob как буфер массива.

Во-вторых, метод readAsBinaryString() считывает файл как двоичную строку.

readAsBinaryString(<blob>);

один из них<blob>означаетBlobобъектный файл.

Метод readAsBinaryString() будет читать файл объекта Blob как двоичную строку.

В-третьих, метод readAsText(), который считывает файл как двоичную строку.

readAsText(<blob>,<encoding>);

// 读取为文本，encoding 为文本的编码方式

В-четвертых, метод readAsDataURL() считывает файл как строку DataURL:

readAsDataURL(<blob>);

// 读取为DataURL字符串

В-пятых, метод abort(), прерывающий операцию чтения

abort() // 没有参数

события интерфейса

  1. loadstartсобытие, событие, которое срабатывает, когда начинается чтение данных
  2. proressсобытие, которое срабатывает при чтении данных
  3. loadсобытие, которое запускается, когда чтение данных успешно завершено
  4. abortсобытие, которое срабатывает, когда прерывание считывает данные
  5. errorсобытие, которое срабатывает при возникновении ошибки при чтении данных
  6. loadendСобытие, которое срабатывает, когда чтение данных завершено, чтение данных может быть успешным или неудачным

Интерфейс FileReader

Пример:

// 读取文件
function ReadAs(action){
 var blob = document.getElementById("files").files[0];
 if(blob){
  var reader = new FileReader(); // 声明接口对象
  // 读取文件的方法
  switch(action.toLowerCase()){
   case "binarystring":
    reader.readAsBinaryString(blob);
    break;
   case "arraybuffer":
    reader.readAsArrayBuffer(blob);
    break;
   case "text":
    reader.readAsText(blob);
    break;
   case "dataurl":
    reader.readAsDataURL(blob);
    break;
  }
  
  reader.onload = function(e){
   // 访问FileReader 的接口属性 result,把读取到内存里的内容获取出来
   var result = this.result;
   // 如果是图文件
   if(/image\/\w+/.test(blob.type) && action.toLowerCase() == "dataurl"){
    document.getElementById("result").innerHTML = "<img src='" + result + "'/>";
   } else {
    document.getElementById("result").innerHTML = result；
   }
  }
 }
}

События интерфейса FileReader

Пример:

<form action="" method="post">
 <input type="file" id="files" multiple accept="image/*"/>
 <input type="button" value="读取文件" onclick="FileReaderEvent()"/>
 <p id="message"></p>
</form>

var blob = document.getElementById("files").files[0];
var message = document.getElementById("message");

var reader = new FileReader();
// 添加 loadstart 事件
reader.onloadstart = function(e){

}
// 添加 progress 事件
reader.onprogress = function(e){

}
// 添加 load 事件
reader.onload = function(e){

}
// 添加 abort 事件
reader.onabort = function(e){

}
// 添加 error 事件
reader.onerror = function(e){

}
// 添加 loadend 事件
reader.onloadend = function(e){

}

Перетащите изображение в браузер

Пример:

Определите обработчик события перетаскивания dropHandle()

Определите функцию loadImg() для загрузки одного файла

// 目标元素的变量
var target;
// drop 事件处理函数
function dropHandle(e){
// 获取拖拽的文件
 var fileList = e.dataTransfer.files,
 fileType;
 // 遍历
 for(var i=0; i<fileList.length; i++){
  fileType = fileList[i].type;
  if(fileType.indexOf('image') == -1) {
   alert('');
   return;
  }
  // 加载单个文件
  loadImg(fileList[i]);
 }
}

// 加载
function loadImg(file){
// 声明接口对象
var reader = new FileReader();
// 添加load事件处理
reader.onload = function(e){
 var oImg = document.createElement("img");
 oImg.src = this.result;
 target.appendChild(oImg);
}
// 读取文件
reader.readAsDataURL(file);
}

После загрузки страницы вы можете получитьtargetЦелевой контейнер используется для хранения перетаскиваемых изображений.

Датьtargetконтейнер добавитьdragoverобработка событий иdropобработка событий

window.onload = function() {
 // 获取目标元素
 target = document.getElementById('dropTarget')
 // 给目标元素添加 dragover 事件处理
 target.addEventListener('dragover', function(e){
  e.preventDefault();
 },false);
 
 target.addEventListener('drop', dropHandle, false);
}

❤️Подписывайтесь + лайк + избранное + комментарий + пересылка ❤️, оригинальность непроста, поощряйте автора создавать лучшие статьи

Нравится, добавляете в избранное и комментируете

яJeskson(Dada front-end), спасибо за ваши таланты:Нравится, добавляете в избранное и комментируете, увидимся в следующий раз! (Если что-то не так с объяснением в этой статье, укажите ☞Спасибо, будем учиться вместе)

Увидимся в следующий раз!

Статья постоянно обновляется, вы можете искать в WeChat "Программист Дораэмон"Прочитайте ее впервые и ответьте на [Информацию] Я подготовил информацию о производителях первой линии, эта статьяwww.dadaqianduan.cn/#/был записан

githubвключено, добро пожаловатьStar:GitHub.com/веб-блог VUE/…

Категории