基本概念
在HTML5中,任何元素都可以拖放,Drap和Drop。拖放属于HTML事件中的Mouse事件。
实例讲解
代码地址:
... <body> <div id="end-area" class="area"></div> <img id="start-area" draggable="true" src="http://pic1.zhimg.com/d80d9ff11c28c19123bc75a27d3c1df8_l.jpg"> <script id="jsbin-javascript"> var img = document.getElementById("start-area"); img.ondragstart = function(event) { event.dataTransfer.setData("Text", event.target.id); }; var div = document.getElementById("end-area"); div.ondragover = function(event) { event.preventDefault(); }; div.ondrop = function(event) { event.preventDefault(); var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); }; </script> </body> ...
大体模样:
实现过程
1.设置元素可拖放。(HTML部分)
<img draggable="true">
注意:链接和图像都是默认可拖动。因此上述代码可以不用添加draggable属性,但为了可读性还是加上吧。
2.拖放过程需要怎么处理?(JS部分)
需要在被拖元素上绑定事件:ondragstart事件。
基于HTML和JavaScript分离的原则,代码为:
img.ondragstart = function(event) { event.dataTransfer.setData("Text", event.target.id); };
这代码里面最关键的是dataTransfer对象。它是事件对象(event)的一个属性,所以只能在拖放事件处理程序中访问dataTransfer对象,用来完善拖放功能。
dataTransfer对象有两个方法:getData()和setData()。两个方法之间的关系是:setData()方法的第一个参数,也是getData()方法唯一的一个参数,是一个字符串,表示保存的数据类型,取值为"text"或"URL。
3.拖放到哪个位置?(JS部分)
目标元素绑定事件:ondragover事件。
div.ondragover = function(event) { event.preventDefault(); };
默认地,无法将数据/元素放置到其他元素中。所以通过event.preventDefault()
来阻止对元素的默认处理方式。
4.放置。(JS部分)
目标元素绑定事件:ondrop事件。
div.ondrop = function(event) { event.preventDefault(); var data = event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); };
放置实际上是移动的过程,用appendChild()方法。
相关推荐
在HTML5中,拖放是标准的一部分,任何元素都能够拖放,具体内容如下 1、拖放 XML/HTML Code复制内容到剪贴板 <!DOCTYPE HTML> <html> <head> <style type=text/css> #div1 {...
主要为大家详细介绍了HTML5拖放功能的相关资料,如何实现HTML5拖放效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
随附的代码是关于如何扩展 HTML5 拖放功能的教程 - 因此它可以处理多个元素,并支持键盘交互,供视力正常和屏幕阅读器用户使用。 该教程可以在这里找到: :
拖放文件上传-PHP-Jquery-AJAX 这是使用 HTML5 拖放功能的最简单易懂的上传文件版本。 安装指南: 1.在你的机器上安装Xampp。 2.使用本地服务器运行项目。 所有文件都将上传到名为“uploads”的文件夹中 享受
0. 基于HTML5拖放功能,动态拖放并自动实时保存布局。 1. 前后端分离:前端 Echarts JavaScript BootStrap; 后端Python Flask; 2. 数据动态更新:服务端触发数据源的变化,前端AJAX自动获取最新数据并渲染到Echarts...
仿回收站效果的设计与实现:在Windows等操作系统中均包含回收站功能,用户可以直接将不需要的文件拖拽并放置到桌面回收站图标上以实现文件删除。 图片相框展示的设计与实现:目前市面上一些修图工具软件带有自动为图片...
如何利用vue.js实现拖放功能 添加拖放功能是使你的程序更加自然和友好的方法。尽管有一些提供拖放功能的库,但是了解它们在底层的工作原理是非常有意义的。 在本文中,我们将用内置的 HTML 拖放 API 来实现简单的...
HTML5拖放选择图片、删除选择功能,上边有几个按钮,分别是选择全部,全部不选,删除,也可以鼠标点选任意一个图片,点击Delete后可动态删除这张图片,当然只是在列表中删除,并不是真正把图片从硬盘上删除。HTML5...
0. 基于HTML5拖放功能,动态拖放并自动实时保存布局。 1. 前后端分离:前端 Echarts JavaScript BootStrap; 后端Python Flask; 2. 数据动态更新:服务端触发数据源的变化,前端AJAX自动获取最新数据并渲染到Echarts...
仿回收站效果的设计与实现:在Windows等操作系统中均包含回收站功能,用户可以直接将不需要的文件拖拽并放置到桌面回收站图标上以实现文件删除。 图片相框展示的设计与实现:目前市面上一些修图工具软件带有自动为图片...
一个简单的“拖放”游戏,展示HTML5中的拖放功能。 客户端是使用HTML,CSS和Javascript实现的。 服务器端是使用Javascript和Perl实现的。 项目演示: : 该项目已部署在本地服务器(XAMPP)上。 配置XAMPP的步骤...
dragdroptouch, 在移动( 触摸) 设备上,支持HTML5拖放支持的Polyfill DragDropTouch支持HTML5拖放支持的Polyfill在... 不幸的是,大多数移动浏览器都没有实现,因这里依赖HTML5拖放的应用程序在移动设备上降低功能。D
后来随着IE版本的更新,拖放事件也在慢慢完善,HTML5就以IE的拖放功能制定了该规范,Firefox 3.5、Safari 3+、chrome以及它们之后的版本都支持了该功能。 默认情况下,网页中的图像、链接和文本是可以拖动的,而其余...
这是一款使用html5 canvas制作的可拖放互动的照片墙插件。在这个html5照片墙插件中,可以随时拖动图片、放大缩小图片、旋转图片、设置图片边框等等功能。
这是一款用于帮助你实现 HTML5 文件拖放上传功能的 jQuery 插件
vue-drag-and-drop一种指令,用于为元素和数据提供拖放功能。 安装可通过npm安装vue-drag-and-drop或包含在内嵌脚本中,例如example.html。 Mob vue-drag-and-drop一种指令,用于为元素和数据提供拖放功能。 安装可...
jngDragDrop 指令允许您在元素上启用原生 HTML5 拖放功能。 文档目前正在处理中。 ##为什么我要创建这个指令? 在从 github 尝试了几个选项后,我无法在我的项目中真正使用它们。 其中一些很难与现代 AngularJS ...
HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,不需要去写一大堆的 js,只需要通过监听元素的拖放事件就能实现各种拖放功能。
HTML 的拖放 API 依赖 DOM 事件模型,获取拖放和放置元素的相关信息,以此实现拖放功能。我们只需要注册很少几个事件监听器,就能把任何元素变成可拖动或可放置的。 拖放 API 除了提供基本的拖放功能接口外,还可以...