<!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. Problem 22

    Problem 22 Using names.txt (https://projecteuler.net/problem=22)(right click and 'Save Link/Target A ...

  2. datawhale爬虫实训4

    DataWhale-Task4(爬取丁香园2) 任务:使用lxml爬虫帖子相关的回复与部分用户信息(用户名,头像地址,回复详情) 难点:需要登录才能看到所有回复 浏览器登录上去,查看cookies信息 ...

  3. hdu 1576扩展欧几里得算法

    #include<stdio.h> #define ll long long /* 2.那么x,y的一组解就是x1*m1,y1*m1,但是由于满足方程的解无穷多个, 在实际的解题中一般都会 ...

  4. mysql-windows修改root密码

    安装mysql完成后 直接进入方式 mysql -u root -p 设置mysql的root密码 mysql -u root -p password 8888

  5. ZOJ 3527

    这题难在破环. 对于不是环的情况,只需按照一般的树形DP来做,一步一步往根递推就可以了.对于环,则枚举其中一点的两种情况,取或不取,然后再递推,就可以了.当到达某结点的下一结点为环开始的点时,退出即可 ...

  6. 一种加快在苹果app store中上架的方法

    预计近期苹果app应用上架的比較多,审核比較慢,如今一个app从提交到上架短则7.8天.长则2.3个星期.我在实际上线应用时,总结了一个简单有用的小技巧,能够加快上架时间,近期使用这样的方法后.我们基 ...

  7. hdu1209（Clock）

    pid=1209">点击打开hdu1209 Problem Description There is an analog clock with two hands: an hour h ...

  8. Memcache 和 Radis 比较

    Memcache 和 Radis 比较 2014-03-28 11:00 2447人阅读 评论(0) 收藏 举报  分类: memcache(6)  Redis(7)  版权声明:本文为博主原创文章, ...

  9. 科普：alphago是什么

    鉴于大部分人类对alphago的认识: 1:Alphago有什么了不起的?不就是算得快吗.ibm早在20年前就通过象棋战胜人类了.又是Google的一次营销. 2:alphago 实现人工智能了,电脑 ...

  10. HDU4300-Clairewd’s message-KMP

    题目链接:pid=4300">http://acm.hdu.edu.cn/showproblem.php?pid=4300 题目意思真的非常难读懂. 题意:给定两组字符串,第一组仅仅有 ...