自定义表单（二）--拖拽（HTML版本）

一、瞎扯

最近在折腾人工智能，今天写了段tensorflow，用来分辨手写字体的图片，跑的时间有点久，所以就跑回来跟前端玩耍了，其实代码早就写好了，只是补上文章。

二、Html5原生拖拽介绍

Html5的很多特性十分激动人心，比如这里的拖拽功能，还有websockeet，从此网页聊天程序就能更轻松的编写出来，再有就是canvas，于是撼动了flash长久的统治地位，H5还开始进入手机APP领域，开始在制作APP的不归路上越走越远了。

H5的拖拽十分好用，玩过js拖拽的人知道，在那里，拖拽的效果什么的都需要自己实现，十分地麻烦和复杂，但是在H5中都予以了封装，连移动效果都有，相当不错，简化了开发，不过事实上，对于深入学习并不利，因此想要深入理解原理的小伙伴们建议去实现一下js版本的拖拽。

三、HTML拖拽实现

跟JS版本的原理一样，H5的拖拽也分为三个步骤，开始拖拽，拖拽时，拖拽后
前提：拖拽的元素要写上draggable="true"的标签
1、拖拽元素的 ondragstart，里面写的代码表示开始拖拽的时候发生的事
2、拖放元素所处位置的ondragover，比如拖拽一个img到div上方额，就会触发div的这个事件
3、拖放元素所处位置的ondrop，里面写的代码表示放置后所触发的事件

很多人肯定会问，那该如何传递数据呢，这里H5也考虑到了，在这里可以通过dataTransfer来传递数据

四、dataTransfer的使用

这里借用W3CSCHOOL中的例子来说明，

function dragStart(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

这里其实就是利用setData传递一个文本格式的参数（拖拽元素的id）

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

这里则是通过getData来获取这个参数。大吃一惊了吧，方便到爆了。

因为这个html5拖拽很简单，因此本文其实着重想讲解一下这个dataTransfer。（其实也就是官方api上抄来的而已，哈哈哈哈，不要见怪，我也不敢瞎造啊）

五、dataTransfer API

Properties

DataTransfer.dropEffect

Gets the type of drag-and-drop operation currently selected or sets the operation to a new type. The value must be

none

copy

link

or

move

.
获取或者设置当前被选择元素的拖拽类型，它的值必须为none、copy、link、或者move

DataTransfer.effectAllowed

Provides all of the types of operations that are possible. Must be one of

none

,

copy

,

copyLink

,

copyMove

,

link

,

linkMove

,

move

,

all

or

uninitialized

.
提供所有可能的操作种类，必须是

none

,

copy

,

copyLink

,

copyMove

,

link

,

linkMove

,

move

,

all

或者

uninitialized

.中的一个。

DataTransfer.files

Contains a list of all the local files available on the data transfer. If the drag operation doesn't involve dragging files, this property is an empty list.
包含一组可获取的本地文件列表，如果拖拽操作不包含文件，则这个文件列表将会是空的。这个属性超棒，很多拖拽上传功能就是这样子开发出来的

DataTransfer.items

Read
only
Gives a

DataTransferItemList

object
which is a list of all of the drag data.只读，给定一个

DataTransferItemList

的对象，其中包含了一个所有拖拽数据的列表。

DataTransfer.types

Read
only
An array of

string

giving
the formats that were set in the

dragstart

event.
只读，一组字符串数组，给定了在dragstart事件中设置的一组格式。

Methods

void dataTransfer.clearData([format]);

DataTransfer.clearData()

Remove the data associated with a given type. The type argument is optional. If the type is empty or not specified, the data associated with all
types is removed. If data for the specified type does not exist, or the data transfer contains no data, this method will have no effect.

清除给定类别的数据，type这个参数是可选的，如果类别是空或者不明确，跟所有类别相关的数据都将清除掉，如果特定类别的数据不存在，或者dataTransfer不包含数据，则这个方法将没有任何效果。

DOMString dataTransfer.getData(format);

DataTransfer.getData()
Retrieves the data for a given type, or an empty string if data for that type does not exist or the data transfer contains no data.
取回给定类别的数据，如果给定类别的数据不存在或者dataTransfer不包含任何数据，则将返回一个空字符串。

void dataTransfer.setData(format, data);

DataTransfer.setData()
Set the data for a given type. If data for the type does not exist, it is added at the end, such that the last item in the types list will be the new format. If data for the type already exists, the existing data is replaced in the same position.
设置一个给定类别的数据，如果这个类别的数据不存在，则将被添加到末尾，因此这个类别的列表的最后一项将是一个新的格式，如果这个类别已经存在，则存在的数据将被取代为这个新的数据

void dataTransfer.setDragImage(img, xOffset, yOffset);

DataTransfer.setDragImage()
Set the image to be used for dragging if a custom one is desired. 设置拖拽的时候显示的图片（默认是拖拽元素的缩略图）

六、代码

https://github.com/wlmnzf/javascript-train/tree/master/customForm[/code] 
七、感谢
1、MDN  DataTransfer   API
2.、W3CSCHOOL  HTML5拖放
3、太兴奋的时候要听伤感的歌，感谢 网易云音乐 --《岛歌》

欢迎扫码或者搜索 “会打代码的扫地王大爷” 关注公众号