用HTML5拖拽API实现简单的图片拖拽效果。

1.HTML5拖放API的知识点

首先我们需要知道元素是如何拖拽的，需要设置它们的可拖拽属性，其中img和A标签的可拖拽属性默认为真，不需要手动设置。

拖放API的监听事件如下：

Dragstart:源对象被拖动并启动；Drag:在拖动源对象的过程中；拖放dragend:源对象结束；Dragenter:进入过程对象区域；拖动：在过程对象区域内移动；Dragleave:离开过程对象区域；拖放：将源对象拖放到目标区域。对于这些事件，我们需要根据需求通过使用preventDefault()取消其默认行为。

在拖放事件中，提供数据传输在源对象和目标对象之间传输数据，数据传输一般由e.dataTransfer调用，数据传输的方法如下：

setData(格式，数据)getData(格式)；clearData().这些都是一些基础知识。与其听我的BB，不如打开MDN敲几行代码。

二、简单的图片拖放排序。

让我们先播放效果图：

首先看看我们的dom结构

！-partial tag-div # drag-wrap div(class=' item ' id=' wrap 1 ')img(id=' img 1 ').我们需要听的事件是：

const Dragcon=document . GetElementBYID('拖动换行')；drag con . addeventlistener(' drag start '，startDrag，false)；/* * *此处必须防止dragover的默认行为，否则无法触发drop */drag con . addeventlistener(' drag over '，函数(e){ e . preventdefault())；}，false)；dragCon.addEventListener('drop '，exchangeElement，false)；在dragstart事件中，我们需要记住需要交换的子元素和父元素：

函数startDrag(e){ e . datatransfer . setdata(' Text '，e . target . id '；'e . target . ParentElement . id)；}最重要的是处理好我们的交换元素的逻辑，以及掉点事件中一些边际条件的判断。

函数ExchangeElement(e){ e . PreventDefault()；const el=e.target让PE，//要插入位置的父元素CE；//要交换的元素if (el.tagName.toLowerCase()！==' div '){ PE=El . ParentElement；CE=el} else { PE=elCE=El . queryselector(' img ')；}/* * *判断失控*/if(！PE . class list . contains(' item '){ return；} const data=e . datatransfer . getdata(' Text ')。拆分('；');//交换元素document.getelementbyid(数据[1])。appendchildPE . appendchild(document . getelementbyid(数据[0])；}其实如果充分利用好几个阶段的事件，结果会更加精炼。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。