html5之拖放简单效果
2024-10-12 01:31:43
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Drag and Drop</title>
<link rel="stylesheet" href="">
<style type="text/css">
#div1,#div2 {
width:488px;
height:70px;
padding:10px;
border:1px solid #aaaaaa;
}
</style>
<script type="text/javascript">
//默认可放置
function allowDrop(ev){
ev.preventDefault();
}
//设置拖动
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
//设置放置
function drop(ev){
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<!--
/**
* drag(event) 被拖动的数据
* drop(evemt) 放置数据
* draggable = "true" 设置图片可拖动
* 设置允许放置 调用ondragover的事件event.preventDefault();
* event.dataTransfer.getData("Text") 从剪切板中获取指定格式的数据
* event.dataTransfer.setData(""Text",evemt.target.id)给指定的对象赋予数据(数据类型:text,值是可拖动的元素id(drag1))
*/
-->
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="http://www.w3school.com.cn/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</body>
</html>
最新文章
- spring boot 框架 启动更新项目,以及生成 ";实体_";文件
- JSP 和 Servlet 有哪些相同点和不同点,他们之间的联系是什么?
- Tomcat JSP提交参数中文乱码问题解决
- Openvswitch原理与代码分析(2): ovs-vswitchd的启动
- Lua print on the same line
- 转载:C++ vector 类学习笔记
- 一个简单的redis调用类
- 我学cocos2d-x (两) 采用Delegate(信托)
- 在现有代码中通过async/await实现并行
- Android - include属性用法
- C++Primer学习——动态内存
- 【SPOJ839】Optimal Marks 网络流
- HDFS深度历险 之 从客户端逻辑看HDFS写入机制
- C++ 字面量
- 压缩跟踪Compressive Tracking(转)
- thinkCMF----公共模板的引入
- iOS 网易彩票-6设置模块三(常用小功能)
- PHP:第二章——PHP中的break一continue一return语句
- mysql case, if
- H5离线存储-manifest
热门文章
- 代码中函数、变量、常量 / bss段、data段、text段 /sct文件、.map文件的关系[实例分析arm代码(mdk)]
- Activity跳转
- vhost文件设置
- Uniconnection 连 mysql 有时会断线的
- 彻底理解浮动float CSS浮动详解 清除浮动的方法
- node.js 解析xml BOM问题(xmlreader sax.js)
- SRM 577 Div II Level Two: EllysRoomAssignmentsDiv2
- Inter IPP 跟 Microsoft V100编译器区别
- iOS 用GDataXMLNode创建和解析XML
- awk 的逻辑运算字符