<!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之间的拖拽的更多相关文章

  1. 原生js实现div拖拽+按下鼠标计时

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ...

  2. 原生js实现div拖拽

    十分简单的效果. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  3. div/dom元素拖拽缩放插件，纯js实现拖拽缩放，不依赖jQuery~

    产品需求,需要用到对div(dom)进行拖拽缩放操作,看到有好多插件,要么依赖jQuery,要么文件太大. 封装了一个插件,不压缩状态下5KB. html <!DOCTYPE html> ...

  4. Qt实现不同Treewidget之间拖拽

    拖拽是编程中经常要用到的,我这里主要是实习了Treewidget之间直接拖拽Item,按下Ctrl键的话是copy,不按Ctrl则是Move.以下是实现代码 class TreeItemMimeDat ...

  5. html5 拖拽函数1--不兼容火狐

    拖拽元素事件<br/>ondragstart拖拽前触发<br/>ondrag拖拽结束之前连续触发<br/>ondragend 拖拽结束前触发<br/>目 ...

  6. 爱上MVC3~MVC+ZTree实现对树的CURD及拖拽操作

    回到目录 上一讲中,我们学习了如何使用zTree对一棵大树(大数据量的树型结构的数据表,呵呵,名称有点绕,但说的是事实)进行异步加载,今天这讲,我们来说说,如何去操作这棵大树,无非就是添加子节点,删除 ...

  7. 原生弹窗拖拽代码demo+简单的抽奖

    拖拽效果 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  8. html5 Sortable.js 拖拽排序源码分析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.   本帖属于原创,转载请出名出处. 官网http:// ...

  9. MVC+ZTree实现对树的CURD及拖拽操作

    上一讲中,我们学习了如何使用zTree对一棵大树(大数据量的树型结构的数据表,呵呵,名称有点绕,但说的是事实)进行异步加载,今天这讲,我们来说说,如何去操作这棵大树,无非就是添加子节点,删除节点,编辑 ...

随机推荐

  1. Linux系统学习之 三：新手必须掌握的Linux命令3

    内容预览 1.输入输出重定向 2.管道命令符 3.命令行的通配符 4.常用的转义符号 5.重要的环境变量 一.输入输出重定向 重定向技术的5种模式:1 标准覆盖输出重定向 错误覆盖输出重定向 错误追加 ...

  2. （13）处理静态资源（自定义资源映射）【从零开始学Spring Boot】

    上面我们介绍了Spring Boot 的默认资源映射,一般够用了,那我们如何自定义目录? 这些资源都是打包在jar包中的,然后实际应用中,我们还有很多资源是在管理系统中动态维护的,并不可能在程序包中, ...

  3. Windows 2003 IIS 不支持ASP的问题

    Windows 2003 IIS 不支持ASP的问题 问题: HTTP 错误 404 - 文件或目录未找到. Internet 信息服务 (IIS) 第一步,启用Asp,进入:控制面板 -> 管 ...

  4. Hadoop版本：CDH, HDP, MapR

    Hadoop版本:CDH, HDP, MapR 学习了:http://dongxicheng.org/mapreduce-nextgen/hadoop-distribution-selection/ ...

  5. BZOJ 3514 Codechef MARCH14 GERALD07加强版 Link-Cut-Tree+划分树

    题目大意: 给定n个点m条边的无向图.求问当图中仅仅有[编号在[l,r]区间内]的边存在时图中的联通块个数 强制在线 注意联通块是指联通了就是同一块,不是Tarjan求的那种块 看到这题的那一刻我就想 ...

  6. python中经常使用的字典内建函数

    1.len(mapping)        返回映射的长度(键-值对的个数) 2.hash(obj)              返回obj的哈希值 >>> myDict = {'na ...

  7. 【cl】maven新建项目

    http://blog.csdn.net/sushengmiyan/article/details/40142771 使用maven创建一个helloworld 在本地硬盘创建一个文件夹作为maven ...

  8. 数据结构（三）——栈Stack

    栈是一种特殊的线性表,插入和删除操作均在栈顶进行,插入操作称为入栈,删除操作称为出栈. 一.顺序栈 利用顺序存储方式实现的栈称为顺序栈,下面是它的一些基本操作实现算法,需要理解和记忆. 1.顺序栈的类 ...

  9. SharePoint创建一个简单的Visio Web部件图

    SharePoint创建一个简单的Visio Web部件图 Visio有很多强大的Mash-up混聚功能,使它能够轻松集成到SharePoint 2010中. 1. 打开Visio 2010,创建新的 ...

  10. declare-styleable的使用

    declare-styleable:declare-styleable是给自定义控件添加自定义属性用的. 1.首先,先写attrs.xml 在res-vlaues文件夹下创建资源文件attrs.xml ...