Собственное перетаскивание HTML5 Подробное объяснение перетаскивания

JavaScript HTML

предисловие

Перетаскивание (drap && drop) часто встречается в нашей обычной работе. Это означает: возьмите объект, а затем перетащите его в другое место. В настоящее время он является частью стандарта HTML5. Я изучал и практиковал эту функцию несколькими способами.

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

Давайте сначала посмотрим на процесс перетаскивания:

选中 --->  拖动  ---> 释放

Затем давайте шаг за шагом рассмотрим, что происходит в этом процессе.

проверил

В стандарте HTML5, чтобы сделать элемент перетаскиваемым, установите для свойства draggable значение true.
Текст, изображения и ссылки можно перетаскивать по умолчанию, и для их свойства draggable автоматически устанавливается значение true.
Изображения и ссылки можно перетаскивать, удерживая левую кнопку мыши, чтобы выбрать их.
Текст можно перетаскивать только в том случае, если он выделен. Если свойство draggable текста настройки отображения установлено, вы также можете перетаскивать его напрямую, удерживая левую кнопку мыши.

свойство draggable: установите, можно ли перетаскивать элемент. грамматика:<element draggable="true | false | auto" >

  • правда: можно перетаскивать
  • false: отключить перетаскивание
  • auto: можно ли перетаскивать его в соответствии с определением браузера.

тянуть

Каждый перетаскиваемый элемент проходит через три процесса в процессе перетаскивания.拖动开始-->拖动过程中--> 拖动结束.

объект название события иллюстрировать
перетаскиваемый элемент dragstart Запускается, когда элемент начинает перетаскиваться
drag Повторно срабатывает при перетаскивании элемента
dragend Запускается после завершения операции перетаскивания
целевой объект dragenter Запускается, когда перетаскиваемый элемент входит в пространство экрана, занятое целевым элементом
dragover Запускается, когда перетаскиваемый элемент находится внутри целевого элемента
dragleave Запускается, когда перетаскиваемый элемент покидает элемент назначения, не отпуская его

По умолчанию события dragenter и dragover отказываются принимать любой перетаскиваемый элемент. Поэтому мы должны предотвратить такое поведение браузера по умолчанию. e.preventDefault();

освобожден

После достижения пункта назначения отпустите событие элемента

объект название события иллюстрировать
целевой объект drop Запускается, когда перетаскиваемый элемент помещается в элемент назначения, обычно для отмены поведения браузера по умолчанию.

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

<!DOCTYPE HTML>
<html>

<head>
    <title>拖放示例-文本</title>
</head>
<style>
.src {
    display: flex;
}

.dropabled {
    flex: 1;
}

.txt {
    color: green;
}

.img {
    width: 100px;
    height: 100px;
    border: 1px solid gray;
}

.target {
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 1px solid gray;
    color: red;
}
</style>

<body>
    <div class="src">
        <div class="dragabled">
            <div class="txt" id="txt">
                所有的文字都可拖拽。
                <p draggable="true">此段文字设置了属性draggable="true"</p>  
            </div>
            <div class="url" id="url">
                <a href="http://weiqinl.com" target="_blank">我是url:http://weiqinl.com</a>
            </div>
            <img class="img" id="tupian1" src="img1.png" alt="图片1" />
            <img class="img" id="tupian2" src="img2.png" alt="图片2" />
        </div>
        <div id='target' class="dropabled target">Drop Here</div>
    </div>
    <script>
        var dragSrc = document.getElementById('txt')
        var target = document.getElementById('target')

        dragSrc.ondragstart = handle_start
        dragSrc.ondrag = handle_drag
        dragSrc.ondragend = handle_end

        function handle_start(e) {
          console.log('dragstart-在元素开始被拖动时候触发')
        }

      function handle_drag() {
            console.log('drag-在元素被拖动时候反复触发')
        }

      function handle_end() {
            console.log('dragend-在拖动操作完成时触发')
        }


        target.ondragenter = handle_enter
        target.ondragover = handle_over
        target.ondragleave = handle_leave

        target.ondrop = handle_drop

        function handle_enter(e) {
            console.log('handle_enter-当元素进入目的地时触发')
            // 阻止浏览器默认行为
            e.preventDefault()
        }

        function handle_over(e) {
            console.log('handle_over-当元素在目的地时触发')
            // 阻止浏览器默认行为
            e.preventDefault()
        }

        function handle_leave(e) {
            console.log('handle_leave-当元素离开目的地时触发')
            // 阻止浏览器默认行为
            // e.preventDefault()
        }

        function handle_drop(e) {
            console.log('handle_drop-当元素在目的地放下时触发')
            var t = Date.now()
            target.innerHTML = ''
            target.append(t + '-拖放触发的事件。')
            e.preventDefault()
        }
    </script>
</body>

</html>

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

Во всем процессе перетаскивания то, что мы сказали выше, является поверхностным явлением, что еще произойдет внутри процесса события? См. объект DataTransfer ниже 👇.

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

Объект, отправляемый одновременно с событием, вызванным операцией перетаскивания, — это DragEvent, производный от MouseEvent, обладающий всеми функциями объектов Event и MouseEvent и добавляющий свойство dataTransfer. Это свойство используется для сохранения перетаскиваемых данных и информации о взаимодействии и возвращает объект DataTransfer.
// DataTransfer dataTransfer = DragEvent.dataTransfer
Объект DataTransfer определяет множество свойств и методов, рассмотрим некоторые из стандартных.

Атрибуты иллюстрировать
types Свойство только для чтения. Он возвращает массив формата данных перетаскивания, который мы установили в событии dragstart. Порядок форматирования такой же, как порядок данных, содержащихся в операции перетаскивания. Это свойство поддерживается IE10+, Edge, Safari3.1, Firefox3.5+ и Chrome4 и выше.
files Возвращает список файлов в операции перетаскивания. Содержит список всех локальных файлов, доступных при передаче данных. Если операция перетаскивания не включает перетаскивание файлов, это свойство является пустым списком.
dropEffect Получите тип текущей выбранной операции перетаскивания или задайте для операции новый тип. Всегда должно быть установлено одно из возможных значений effectAllowed [none, move, copy, link]. DropEffect устанавливается для цели перетаскивания в обработчике событий перетаскивания.
effectAllowed Указывает эффекты, разрешенные для операций перетаскивания. Должен быть одним из них [ none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized ] По умолчанию неинициализировано, что означает, что разрешены все эффекты. Установите свойство effectAllowed в обработчике ondragstart
метод иллюстрировать
void setData(format, data) Устанавливает данные перетаскивания для операции перетаскивания на указанные данные и тип. формат может быть типом MIME
String getData(format) Возвращает данные в указанном формате, формат такой же, как в setData()
void clearData([format]) Удаляет данные для операции перетаскивания заданного типа. Если данные данного типа не существуют, этот метод ничего не делает. Если аргументы не указаны, удаляются все типы данных.
void setDragImage(img, xOffset, yOffset) Указывает изображение, которое будет отображаться под курсором при перетаскивании. В большинстве случаев задавать не нужно, поскольку перетаскиваемый узел создается как образ по умолчанию. Параметры x, y указывают горизонтальное и вертикальное смещения изображения соответственно. 
//IE10及之前版本，不支持扩展的MIME类型名
//Firefox 5版本之前，不能正确的将url和text映射为text/uri-list 和text/plain
var dataTransfer = event.dataTransfer;
//读取文本,
var text = dataTransfer.getData("Text");
//读取URL,
var url = dataTransfer.getData("url") || dataTransfer.getData("text/uri-list");

Пример каждого метода атрибута drag-drop-dataTransfer

поддержка браузера

Сказав так много, если браузер не поддерживает это, это тоже ерунда.

Method of easily dragging and dropping elements on a page, requiring minimal JavaScript.
Минимальные требования js, простой способ перетаскивания элементов страницы для достижения

Drag and Drop 浏览器兼容性.png
Перетащите совместимость с браузером.png

Поддержка браузера для перетаскивания --caniuse

note

  • dataTransfer.itemsПоддерживается только Chrome
  • dropzoneсвойство, в настоящее время не поддерживаемое браузерами
  • Поддержка Firefox.setDragImageЛюбой тип элемента DOM. Хром должен иметьHTMLImageElementили любой элемент DOM, прикрепленный к DOM и браузеру..setDragImageВнутри видового экрана.
    1. Частичная поддержка означает отсутствие поддержкиdataTransfer.filesили.typesобъект
    2. Частичная поддержка означает отсутствие поддержки.setDragImage
    3. Средства частичной поддержкиdataTransfer.setData / getDataограниченное количество поддерживаемых форматов для

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

  • getData()В браузере chrome 62.0 возможно толькоdropэффективен в мероприятии.
  • При использованииsetDragImageметод, указанное изображение не существует, то процесс перетаскивания:
    1. Браузер сафари 11.0.1, только триггерыdragstartа такжеdragendмероприятие.
    2. Chrome, Opera и Firefox запускают другие события нормально.
  • Каждый раз, когда вы перетаскиваете мышью, Firefox будет открывать новую страницу и автоматически искатьdataTransfer.getData()полученный контент.
    решение, вdropВ событии добавить:e.stopPropagation();// 不再派发事件。解决Firefox浏览器，打开新窗口的问题.
  • В опере 49 версии ссылку по умолчанию нельзя перетаскивать, она должна бытьdraggableсвойство установлено наtrue, его можно перетащить.
  • оdropEffectа такжеeffectAllowed.
    1. effectAllowedСуществует не более нескольких эффектов, позволяющих выполнять операции перетаскивания.dropEffectНастройка конкретного эффекта операции перетаскивания может быть только одной из четырех возможностей.
    2. еслиeffectAllowedУстановить какnone, перетаскивание элементов запрещено. Однако события, которые могут быть вызваны каждым браузером, различаются. (Примечание: Safari может перетаскивать элементы, и все события будут запущены)
    3. еслиdropEffectУстановить какnone, его нельзя перетаскивать в целевой элемент.
    4. если установленоeffectAllowedзначение, то если вы хотите установитьdropEffectзначение, которое должно быть таким же, какeffectAllowedЗначение такое же, в противном случае эффект перетаскивания недействителен, и перетаскиваемый элемент не может быть помещен на элемент назначения. (Примечание: Safari11.0.1 работает и его также можно перетащить в элемент назначения, но это не стандартно).

Пример

Пример каждого метода атрибута drag-drop-dataTransfer
Событие перетаскивания срабатывает

Суммировать

Собственный API перетаскивания HTML5, перетаскивание и перетаскивание встречается во многих ситуациях в реальной работе.
Выше я представил только некоторые часто используемые API. API не сложный, просто посмотрите на него некоторое время, и вы узнаете его на практике. У каждого браузера может быть немного разная производительность, но я считаю, что все равно все будут развиваться в направлении стандарта.
Кстати, когда первый раз писал статью в Наггетс, редактор уценки отличный 👍.
Блог Парк Адрес:www.cnblogs.com/weiqinl

Категории