HTML5+CSS3实现拖放(Drag and Drop)示例_html5教程技巧

本文简单介绍一下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

(0)
上一篇 2025年3月11日 09:00:56
下一篇 2025年3月11日 09:01:03

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论