为了演示拖拽用例,我要创建一个简单的网络配置工具(UI),管理员可以用它来收集资源。你能在各个区域之间拖拽资源,往区域里添加资源,删除没有用的资源。出于教学的目的,我尽量使这个例子简单,但可以看到,依据这些基本的做法,你可以开发出一个全功能的网络管理工具。
实现拖拽功能的关键方法非常的简单,就像下面写的这样:
function dragIt(target, e) {
e.dataTransfer.setData(‘SpanImg’, target.id);
}
function dropIt(target, e) {
var id = e.dataTransfer.getData(‘SpanImg’);
target.appendChild(document.getElementById(id));
e.preventDefault();
}
我使用了table元素来实现布局结构,并把它当做ondrop事件的目标:
<td align=”center” width=”100″ id=”blue” ondrop=”dropIt(this, event)” ondragenter=”return false” ondragover=”return false”> …. </td>
我使用了span元素(包裹住图片)做拖拽对象:
<span draggable=”true” id=”t_1″ ondragstart=”dragIt(this, event)”><img src=”https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/tower.jpg“></span>
你可以下载拖拽例子中的所有的HTML代码 点击下载.
分享到:
相关推荐
在HTML5的pc上面实现了相当多的功能,工作中也用到了拖拉上传,特地记录下该功能 在拖动目标上触发事件 (源元素): ondragstart – 用户开始拖动元素时触发 ondrag – 元素正在拖动时触发 ondragend – 用户...
在HTML5的pc上面实现了相当多的功能,工作中也用到了拖拉上传,特地记录下该功能 在拖动目标上触发事件 (源元素): ondragstart – 用户开始拖动元素时触发 ondrag – 元素正在拖动时触发 ondragend – 用户完成...
——————————————————————————– 首先需要安装vuedraggable依赖包: npm install vuedraggable --save 因为拖拽组件依赖sortablejs ,如果项目没有安装sortablejs ,可能需要安装一下 npm ...
LightPicture – 开源图床系统 高性能、精致、扁平化、多样化储存式的企业化免费图床程序 LightPicture图床系统支持第三方云储存,本地、阿里云 OSS、腾讯云 COS、七牛云 支持多桶储存 可同时添加多个对象存储桶...
可同时添加多个对象存储桶管理 多图上传、拖拽上传、粘贴上传、上传预览、全屏预览、 一键复制图片外链 多用户管理、分组管理;不同分组用户控制不同的存储桶 完整的权限控制功能 不同用户组可分配不同的操作权限...
js实现图片放大和拖拽特效是一款非常实用的js特效,实现了图片的放大和拖拽功能,没用用到jquery插件,是用原生javascript实现的,除了点击放大和缩小按钮来控制图片的放大缩小,还可以使用鼠标的滚轮控制图片的缩放...
dhtmlxGrid支持强大的功能,如必要的基于Web的电子表格、合并单元格、拆分模式、网格列拖动和拖放或脚本方法和数据复制到剪贴板(CSV格式) 。AJAX DataGrid的可扩展架构允许您使用自定义单元格编辑器(每一个细胞的...
在项目开发中,如果我们使用javascript自带的提示对话框,感觉不怎么美观,所以我们通常都是自己定义一些对话框,这里我实现点击按钮就弹窗一个登录的窗口,点击该窗口并可以实现拖拽功能,太多文字的东西说不清楚,...
Firefox 是一个快速、安全且灵活的网页浏览器,这是我们的使命。 网站优化必备的9个Firefox插件 在网页设计制作中经常使用到的...MeasureIt是一个很方便的页面测量工具,只需要拖动鼠标就能完成度量,是不是很直观?
支持从浏览器拖动和拖放链接 监视剪贴板的手动或自动创建新项目 完全可配置的用户界面(包括工具栏)有一个方便的新项目向导 会在后台运行 提供支持,并提取从Java和VB脚本,Java类,层叠样式表(.CSS),...
JQuery 确实很方便,简单的代码,却能实现一些不错的功能。 代码如下:[removed]<!– $(function(){ //交替显示行 $(‘#alternation’).click(function(){ $(‘tbody > tr:odd’, $(‘#example’)).toggleClass...
详细介绍 – [ Zoomla!逐浪CMS v8.1.5 ] 逐浪CMS 是一个基于.net core 3.1框架,以微软长线支持为规范,满足企业级应用开发的cms建站源码。 作为中国唯一具备自主CMS、图标、图库、字库的网站管理系统,Zoomla!逐浪...
3.15 如iPhone拖动相片特效——Gallery画廊 3.16 自制计算器——多按钮的整合应用 3.17 关于(About)程序信息——Menu功能菜单程序设计 3.18 程序加载中,请稍后——ProgressDialog与线程整合应用 3.19 全屏幕以按钮...
14、在线构建器:拖动表单元素生成相应的HTML代码。 15、连接池监视:监视当前系统数据库连接池状态,可进行分析SQL找出系统性能瓶颈。 16、产品许可: 对项目进行许可证书控制,防止程序拷贝运行。 17、公告通知: ...
亿图最大,而一个轻量级但令人难以置信的强大的图形软件,可以帮助您与您的绘图和图形的需要 – 组织和流程图 – 数据库设计,家的地板,时尚的设计。软件开发人员也可以使用亿图绘制UML(统一建模语言)的图,以...
3.15 如iPhone拖动相片特效——Gallery画廊 3.16 自制计算器——多按钮的整合应用 3.17 关于(About)程序信息——Menu功能菜单程序设计 3.18 程序加载中,请稍后——ProgressDialog与线程整合应用 3.19 全屏幕以按钮...
3.15 如iPhone拖动相片特效——Gallery画廊 3.16 自制计算器——多按钮的整合应用 3.17 关于(About)程序信息——Menu功能菜单程序设计 3.18 程序加载中,请稍后——ProgressDialog与线程整合应用 3.19 全屏幕以按钮...