h5拖动排序,html拖放API
前言
HTML5提供了直接拖拽的API，非常方便我们实现拖拽的效果。我们不需要写很多js，只需要监控元素的拖拽事件就可以实现各种拖拽功能。
若要拖放元素，必须将元素的draggable属性设置为true。当此属性为false时，将不允许拖放。默认情况下，img元素和A元素的draggable属性设置为true，因此可以直接拖放它们。如果您不想拖放这两个元素，请将属性设置为false。
拖放事件
拖放事件由不同的元素生成。当拖放一个元素时，它可能会经过许多元素，最终到达要放置的元素。在这里，我暂时将拖动的元素称为源对象，将传递的元素称为过程对象，将到达的元素称为目标对象。不同的对象产生不同的拖放事件。
来源：
Dragstart:源对象开始拖放。拖动：源对象正在被拖放。Dragend:源对象拖放结束。流程对象：
Dragenter:源对象开始进入过程对象的范围。Dragover:源对象在过程对象的范围内移动。Dragleave:源对象离开过程对象的范围。目标：
放下：源对象被拖入目标对象。div id= source draggable= true A元素/divdiv id=processb元素/divdiv id=targetc元素/div脚本var source=document . getelementbyid( source )，//a元素process=document . getelementbyid( process )，//b元素target=document . getelementbyid( target )；//c元素source . addevent listener( dragstart ，function(ev){//dragstart事件从A元素生成console.log(a元素开始被拖动)；}，false)process . addevent listener( drag enter ，function(ev){//drag enter事件生成console.log(a从元素B开始(元素A开始进入元素B )；}，false)process . addevent listener( drag leave ，function(ev){//drag leave事件通过元素B生成console.log(元素A离开元素B )；}，false)目标。AddEventListener (drop ，function(ev){//drop事件由C元素console.log生成(一个元素拖放到C元素)；ev . prevent default()；}，false)document . ondragover=function(e){ e . prevent default()；}/脚本dataTransfer 对象
所有拖放事件中都提供了dataTransfer对象DataTransfer，用于在源对象和目标对象之间传输数据。接下来，了解这个对象的方法和属性，以理解它是如何传输数据的。
setData()
此方法将数据存储到dataTransfer对象中。接收两个参数。第一个表示要存储的数据字符串。现在，支持以下类型：
Text/plain:文本。文本/html:HTML: html文本xml:XML文本。text/uri-list:URL列表，每个URL占一行。第二个参数是要存储的数据。例如：
event . data transfer . setdata( text/plain ， Hello World )；getData()
此方法从dataTransfer对象读取数据。参数是setData中指定的数据类型。例如：
event . data transfer . get data( text/plain )；clearData()
此方法清除存储在dataTransfer对象中的数据。可选参数，数据类型。如果参数为空，各种数据都将被清除。例如：
event . data transfer . clear data()；setDragImage()
此方法通过使用img元素设置拖放图标。接收三个参数，第一个是图标元素，第二个是图标元素相对于鼠标指针的X轴位移，第三个是图标元素相对于鼠标指针的Y轴位移。例如：
var source=document . getelementbyid( source )，icon=document . createelement( img )；icon . src= img . png ；source . addevent listener( dragstart ，function(ev){ ev . data transfer . setdragimage(icon，-10，-10)}，false)effectAllowed 和 dropEffect 属性
这两个属性结合起来设置拖放的视觉效果。
值得注意的是，IE不支持dataTransfer对象。是的，任何IE版本都不支持。
实现拖放排序
熟悉了拖放API的使用之后，让我们实现一个简单的拖放排序，这在项目中也很常见。先理清思路：
在列表中，每个元素都可以拖放。首先，将每个元素的draggable属性设置为true。监听每个元素的dragstart事件，并设置源对象的样式以区分它。监视每个元素的dragenter事件，当源对象进入当前元素时，在元素前添加源对象。这样后面的元素就会被源对象向下挤压，从而实现排序的效果。但是你会发现源对象不能去最后一个，只能去倒数第二个。这时候就需要对dragleave事件进行监控了。当过程对象是最后一个元素时，源对象离开过程对象，然后将源对象添加到最后一个。主要代码如下：
var source=document . query selector all(。list’)，dragElement=nullfor(var I=0；I源.长度；i ){来源[i]。addEventListener(dragstart ，function(ev){ drag element=this；}，假)；来源[i]。addEventListener(dragenter ，function(ev){ if(dragElement！=this){ this . parent node . insert before(drag element，this)；} }，false)来源[i]。addEventListener(dragleave ，function(ev){ if(dragElement！=this){ if(this==this . parent node . lastelementchild this==this . parent node . last child){ this . parent node . appendchild(drag element)；} } }，false)}；document . ondragover=function(e){ e . prevent default()；} document . ondrop=function(e){ e . preven default()；}完整代码地址：拖动-演示
兼容
主要是在IE中，兼容性不是很好，但至少在IE10中，上面的拖拽排序可以兼容。
而且我在简单的实验中发现，在IE中没有设置高度的情况下，不会触发dragleave事件。
更重要的是，在ios和Android上，它们完全不兼容。好在有插件让它在移动端完美兼容。
插件的地址：ios-html5-drag-drop-shim
你只需要在原代码中引入插件，就可以在移动终端上实现拖拽。
script iosdragdrophim={ enableenter leave:true }/script script src= vendor/IOs-drag-drop . js /script以上是本文的全部内容。希望对你的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。