div与div之间的拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1, #div2{float:left; width:100px; height:100px; border:1px solid #aaaaaa;}
</style>
</head>
<body>
<!-- 拖拽目标：ondrop接收拖拽完成时处理，ondragover拖拽上目标时处理 -->
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<!-- 拖动源：draggable允许拖拽，ondragstart拖拽开始时处理 -->
<img id="drag1" draggable="true" ondragstart="drag(event)" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1848039140,2563753692&fm=200&gp=0.jpg" width="100px" />
</div>
<!-- 拖拽目标：ondrop接收拖拽完成时处理，ondragover拖拽上目标时处理 -->
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
<script type="text/javascript">
// 拖拽源：开始拖拽，存储拖动元素的id
function drag(ev){
ev.dataTransfer.setData("data",ev.target.id
);
}
// 拖拽目标：允许接收拖动
function allowDrop(ev){ ev.preventDefault(); }
// 拖动目标：接收拖拽数据进行处理
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("data");
console.log(data);
console.log(ev);
ev.target.appendChild(document.getElementById(data));
}
</script>
div与div之间的拖拽的更多相关文章
- 原生js实现div拖拽+按下鼠标计时
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ...
- 原生js实现div拖拽
十分简单的效果. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- div/dom元素拖拽缩放插件，纯js实现拖拽缩放，不依赖jQuery~
产品需求,需要用到对div(dom)进行拖拽缩放操作,看到有好多插件,要么依赖jQuery,要么文件太大. 封装了一个插件,不压缩状态下5KB. html <!DOCTYPE html> ...
- Qt实现不同Treewidget之间拖拽
拖拽是编程中经常要用到的,我这里主要是实习了Treewidget之间直接拖拽Item,按下Ctrl键的话是copy,不按Ctrl则是Move.以下是实现代码 class TreeItemMimeDat ...
- html5 拖拽函数1--不兼容火狐
拖拽元素事件<br/>ondragstart拖拽前触发<br/>ondrag拖拽结束之前连续触发<br/>ondragend 拖拽结束前触发<br/>目 ...
- 爱上MVC3~MVC+ZTree实现对树的CURD及拖拽操作
回到目录 上一讲中,我们学习了如何使用zTree对一棵大树(大数据量的树型结构的数据表,呵呵,名称有点绕,但说的是事实)进行异步加载,今天这讲,我们来说说,如何去操作这棵大树,无非就是添加子节点,删除 ...
- 原生弹窗拖拽代码demo+简单的抽奖
拖拽效果 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- html5 Sortable.js 拖拽排序源码分析
最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 本帖属于原创,转载请出名出处. 官网http:// ...
- MVC+ZTree实现对树的CURD及拖拽操作
上一讲中,我们学习了如何使用zTree对一棵大树(大数据量的树型结构的数据表,呵呵,名称有点绕,但说的是事实)进行异步加载,今天这讲,我们来说说,如何去操作这棵大树,无非就是添加子节点,删除节点,编辑 ...
随机推荐
- vue cli 平稳升级webapck4
webpack4 released 已经有一段时间了,插件系统趋于平稳,适逢对webpack3的打包速度很不满意,因此决定将当前在做的项目进行升级,正好也实践一下webpack4. 新特性 0配置 应 ...
- 邓_ PHP·笔记（函数总结）
PHP 指 PHP:超文本预处理器(译者注:PHP: Hypertext Preprocessor,递归命名) PHP 是一种服务器端的脚本语言,类似 ASP PHP 脚本在服务器上执行 PHP 支持 ...
- MySQL：浅析 Impossible WHERE noticed after reading const tables
使用 EXPLAIN 执行计划的时候,在 Extra 中偶尔会看到这样的描述: Impossible WHERE noticed after reading const tables 字面上的意思是: ...
- 配置db账号和密码时一定注意空格问题、空行问题否则连接报错
#postgresql dbpg.datasource.type=com.alibaba.druid.pool.DruidDataSourcepg.datasource.driverClassName ...
- HDU 5380 Travel with candy 单调队列
pid=5380">链接 题解链接:http://www.cygmasot.com/index.php/2015/08/16/hdu_5380 题意: n C 一条数轴上有n+1个加油 ...
- Jetty：部署到Jetty
Web应用的框架 标准Jetty公布版本号能部署标准servlet Spec Web应用和Jetty内部ContextHandler部署描写叙述符,或者两者的一个混合. Web应用是可部署的动态(se ...
- Android常用的一些make命令【转】
本文转载自:http://blog.csdn.net/liuxd3000/article/details/39181377 1.make -jX X表示数字,这个命令将编译Android系统并生成镜 ...
- 记录，javascript中对象的属性名是字符串，却可以不用引号
问题描述:今日看书,里面介绍js的对象的属性名是包括空字符串在内的所以字符串 问题来了,我们平时定义的对象如下,是没有引号""or’'的 var someone = { f ...
- Koa 中实现 chunked 数据传输
有关于 Transfer-Encoding:chunked 类型的响应,参见之前的文章HTTP 响应的分块传输.这里看 Koa 中如何实现. Koa 中请求返回的处理 虽然官方文档有描述说明不建议直接 ...
- Arduino-OLED-四度显示
double Fahrenheit(double celsius) { ; } //摄氏温度度转化为华氏温度 double Kelvin(double celsius) { return celsiu ...