HTML5拖放API实现拖放排序的实例代码

前言

HTML5提供了直接拖放的API。我们很方便的实现拖放效果，不需要写很多js。我们只需要监视元素的拖放事件，以实现各种拖放功能。

如果你想拖动一个元素，你必须设置的元素是真实的可拖动的属性，当该属性为false，则将不允许拖放。IMG和元素都是默认设置可拖动属性实现，可以直接拖放。如果您不想拖放这两个元素，请将属性设置为false。

拖放事件

拖放事件是由不同的元素所产生的。元素是拖把，他可以通过许多元素，最终达到你想要去的地方的元素。在这里，我暂时叫拖作为源对象的元素，这是通过元素称为处理对象，和元素我到达被称为目标对象，不同的对象产生不同的拖放事件。

源对象：

Dragstart：对象开始拖放源。
拖动：源对象拖放过程。
Dragend：源对象拖放结束。
过程对象：

Dragenter：对象开始进入过程的源对象的范围。
德雷弗：源对象移动的过程对象的范围内。
dragleave：源对象的离开过程对象的范围。
目标对象：

拖放：将源对象拖放到目标对象中。
一元
B元素
C元素
无功源= document.getelementbyid（源'，一个） / /元素
过程= document.getelementbyid（教学，B） / /元素
目标= document.getelementbyid（'target'）； / / C元素

Source.addEventListener（'dragstart功能（EV）{ / /拖曳开始事件的元素
console.log（'一元开始拖）；
}，假）

Process.addEventListener（'dragenter功能（EV）{ / / dragEnter事件B元素
console.log（一元开始进入B元素）；
}，假）
Process.addEventListener（'dragleave功能（EV）{ / / dragleave事件B元素
console.log（一元叶B元素）；
}，假）

Target.addEventListener（放弃功能（EV）{ / /删除事件由C元素
console.log（一元拉到C元）；
Ev.preventDefault（）；
}，假）
document.ondraver =功能（e）{ e.preventDefault（）；}
DataTransfer对象

在所有的拖放事件，数据传输对象，数据传输，用于源对象和目标对象之间传递数据。然后理解对象的方法和属性，了解它是如何传递数据。

setData（）

该方法将数据保存到数据传输对象。接收两个参数，第一个是一个字符串来存储数据的类型，现在支持以下：

文本/普通文本文本。
文本：HTML文本。
文本：XML文本。
文本列表：URL列表，每个URL是一行。
第二个参数是要存储的数据：
event.datatransfer.setdata（中/平原，你好世界）；
GetData（）

此方法读取数据传输对象的数据，参数在SetData指定数据类型，例如：
event.datatransfer.getdata（中/平原）；
cleardata（）

这个方法可以清除存储在数据传输对象的数据，参数是可选的，用于数据的类型，如果参数为空，各种数据是空的。例如：
event.datatransfer.cleardata（）；
setdragimage（）

此方法设置阻力和通过使用img元素滴图标。三参数的获得，首先是图标元素，二是x位移的图标元素从鼠标指针，和第三是Y轴位移的图标元素，例如鼠标指针：
无功源= document.getelementbyid（源），
图标= document.createelement（'img）；

icon.src = 'img PNG；

Source.addEventListener（'dragstart功能（EV）{
Ev.dataTransfer.setDragImage（图标、- 10 - 10）
}，假）
effectallowed和dropeffect属性

这两个属性组合起来设置拖放的视觉效果。

值得注意的是，IE不支持数据传输对象。是的，没有IE版本支持。

实现拖放排序

我们已经熟悉了拖放API的使用，我们做了一个简单的拖放排序，这在项目中更为常见：

在一个列表，每个元素可以拖拽，这一集的每个元素的拖动属性为真。
的拖曳开始事件，听的每一个元素的源对象的方式处理的区别。
每个元素的DragEnter事件是听，当源对象进入当前元素，源对象被添加到元素。这背后的元素将被挤压的源对象实现对排序的影响。
但你会发现源对象不能排名最后，仅在第二。此时，我们将监测dragleave事件。当流程对象是最后一个元素时，源对象将离开流程对象，然后将源对象添加到最后一个对象。
主要代码如下：
无功源= document.queryselectorall（'清单'），
dragelement = null；

对于（var i = 0；i < source.length；i++）{
源{我}。addEventListener（'dragstart功能（EV）{
这dragelement =；
}，假）；

源{我}。addEventListener（'dragenter功能（EV）{
如果（dragelement！=）{
this.parentnode.insertbefore（dragelement，这个）；
}
}，假）

源{我}。addEventListener（'dragleave功能（EV）{
如果（dragelement！=）{
如果（= = this.parentnode.lastelementchild | | { = =这。其父节点。lastchild）
this.parentnode.appendchild（dragelement）；
}
}
}，假）
}；

document.ondraver =功能（e）{ e.preventDefault（）；}
document.ondrop =功能（e）{ e.preventDefault（）；}

完整的代码地址：拖动演示

兼容的

它是不可兼容的伊江很好，但至少可以拖动排序在IE10兼容。

在我简单的实验，发现当元素不设置高度，在伊江，它不会触发dragleave事件。

更重要的一点是，在iOS和Android上，它是完全不兼容的，但是有一个插件可以让它在移动设备上完全兼容，这很好。

插件地址：ios-html5-drag-drop-shim

只有插件在原始代码中被引入，并且它可以被拖到移动端。
无功iosdragdropshim = { enableenterleave：true}

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。