HTML5元素拖放设置总结
将元素图片放入div盒子内
1、首先设置元素为可拖放:在img标签内加入draggable=”true”.
<img draggable="true">
2、设置元素的拖动:在img标签中用ondragstart属性调用一个函数drag(ev),这个函数中用dataTransfer.setData()方法设置了被拖数据的数据类型和值.
<img ondragstart=”drag(event)”>
function drag(ev){
ev.dataTansfer.setData(“Text”,ev.target.id)//数据类型是Text,值是可拖动元素的id(“drag1”)。
}
3、放到何处-ondragover
在被放置的div中用ondragover来规定设置的允许设置,因为默认无法将数据/元素放置到其他元素中,如果需要允许放置,必须阻止对元素默认的处理方式。
这时候用ondragover来调用一个函数alloeDrop(ev),函数内部规定了event.preventDefault()方法用来阻止元素的默认处理方式
<div ondragover=”allowDrop(event)”></div>
function allowDrop(ev){
ev.prentDefault();
}
4、下面就是放置了-ondrop
在被放置的div中设置ondrop=”drop(event)”调用drop(ev)函数,函数中规定了放置的过程。
<div ondrop="drop(event)"></div>
Function drop(ev){
ev.preventDefault();//用来避免浏览器对数据的默认处理
- var data=ev.dataTransfer.getData(”Text”);// 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
ev.target.appendChild (document.getElementById(data));// 被拖数据是被拖元素的 id ("drag1")把被拖元素追加到放置元素(目标元素)中
}
最新文章
- mysqlroot密码忘记了,修改root密码
- paper 114:Mahalanobis Distance(马氏距离)
- Bots(逆元,递推)
- 使用dojoConfig配置dojo(翻译)
- PostgreSQL and bloat
- VNC常用操作及常见问题解决办法汇总
- Hopcroft-Karp算法模版
- Chrome浏览器调试技巧
- Java 几种动态代理实现及其性能比较
- 《转载》最新鲜最详细的Android SDK下载安装及配置教程
- 一 Struts2 开发流程
- Docker安装使用battery historian
- vue项目中如何使用多语言(vue-i18n)
- C#从http上拿返回JSON数据
- 撒花!中文翻译仓库链接已加入 ML.NET 官方示例网站首页
- XXE攻防
- The prefix ";mvc"; for element ";mvc:annotation-driven"; is not bound 异常
- Cisco ASA 使用ASDM 配置管理口 方法
- 数据库——SQL数据单表查询
- 我的Java之旅——答答租车系统
热门文章
- 【Leetcode-easy】Remove Duplicates from Sorted Array
- Android Weekly Notes Issue #322
- 【转】ios内联函数 inline
- 《C prime plus (第五版)》 ---第11章 字符串和字符串函数---4
- 使用python转换编码格式
- hadoop —— teragen &; terasort
- Linux学习之路(五)压缩命令
- laravel基础课程---14、表单验证(lavarel如何进行表单验证)
- 手机移动端网站开发流程HTML5
- SpringBoot_Exception_01_No plugin found for prefix &#39;spring-boto&#39; in the current project