自定义表单(二)--拖拽(HTML版本)
来源:互联网 发布:最大子数组 编辑:程序博客网 时间:2024/06/05 06:12
一、瞎扯
最近在折腾人工智能,今天写了段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
none
copy
link
or move
.DataTransfer.effectAllowed
none
, copy
,copyLink
, copyMove
, link
, linkMove
, move
, all
or uninitialized
.none
, copy
,copyLink
, copyMove
, link
, linkMove
, move
, all
或者 uninitialized
.中的一个。DataTransfer.files
DataTransfer.items
Read onlyDataTransferItemList
object which is a list of all of the drag data.DataTransferItemList
的对象,其中包含了一个所有拖拽数据的列表。DataTransfer.types
Read onlystring
giving the formats that were set in the dragstart
event.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.
DOMString dataTransfer.getData(format);
DataTransfer.getData()
void dataTransfer.setData(format, data);DataTransfer.setData()
void dataTransfer.setDragImage(img, xOffset, yOffset);DataTransfer.setDragImage()
六、代码
https://github.com/wlmnzf/javascript-train/tree/master/customForm
七、感谢
1、MDN DataTransfer API
2.、W3CSCHOOL HTML5拖放
3、太兴奋的时候要听伤感的歌,感谢 网易云音乐 --《岛歌》
欢迎扫码或者搜索 “会打代码的扫地王大爷” 关注公众号
0 0
- 自定义表单(二)--拖拽(HTML版本)
- HTML表单处理(二)
- html标签<二>(表单)
- 自定义表单(一)--拖拽(JS版本)
- 自定义表单(完)--(html5版本)
- activiti自定义流程之自定义表单(二):创建表单
- activiti自定义流程之自定义表单(二):创建表单
- HTML第十七节(表单二)
- [HTML] 琐琐碎碎(二)——HTML表单与输入
- 织梦 自定义表单HTML:
- HTML--5(表单)
- <html>form(表单)
- HTML(6)表单
- HTML(二):表单
- Android中实现版本更新(二)自定义更新
- Android中实现版本更新(二)自定义更新
- XHTML表单(二)
- Bootstrap表单(二)
- HihoCoder 1264 神奇字符串(暴力)
- React Native控件之PullToRefreshViewAndroid下拉刷新组件讲解(20)
- Atitit.跨语言 java c#.net php js常用的codec encode算法api 兼容性 应该内置到语言里面
- SSH全套视频教程下载地址
- 【VB.Net】使用SHA256进行简单的XOR文本加密与解密
- 自定义表单(二)--拖拽(HTML版本)
- LeetCode - NimGame
- View的滑动冲突
- Android Service 完全解析
- android小知识点
- 关于Toast的优化
- 不带缓冲的IO
- [015]Java编程思想——多态
- Atitit. 如何判断软件工程师 能力模型 程序员能力模型 项目经理能力模型