本文简单介绍一下html5的拖放实现。
拖放(drag 和 drop)是 html5 标准的组成部分。
浏览器支持:internet explorer 9、firefox、opera 12、chrome 以及 safari 5 支持拖放。
被拖元素,dragElement :
(1)添加事件:ondragstart
(2)添加属性:dragable
放置元素,dropElement:
1、添加事件:ondargenter , ondragover , ondragleave , ondragend ,ondrop
和mouser划入划出一类的事件很类似,字面也很好理解,不赘述了,下面会用例子来说明。
2、页面上元素间的拖放
下面用个小例子,div间的拖放来展示,各个事件如何被触发:
复制代码代码如下:
#dropEle
div
{
float: left;
}
系统中选择的一个或多个文件拖入该div中,files中会存储拖入文件的信息,然后我们通过file可以得到文件的类型,长度,内容然后实现上传。
立即学习“前端免费学习笔记(深入)”;
3、setDragImage(image, x, y)用于设置鼠标移动过程中随鼠标一起移动的效果图。必须在dragstart中设置。
4、types,effectAllowed和dropEffect分别是拖入元素的类型,拖拽过程中鼠标显示的样式,不过通常可以忽略这几个属性,一般用不到。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2913403.html