<!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. 使用for或while循环来处理处理不确定页数的网页数据爬取

    本文转载自以下网站: Python For 和 While 循环爬取不确定页数的网页  https://www.makcyun.top/web_scraping_withpython16.html 需 ...

  2. 继续聊WPF——如何获取ListView中选中的项

    在WPF中获Listview中选中的项,与WinForm里面有着很大的区别,要亲身去研究一下在WPF中如果处理,其实也不难,来,下面我们一起来通过一个简单的示例来感悟一下吧. 第一步就是建立一个WPF ...

  3. 在Win32 Application 环境下实现MFC窗口的创建

    // Win32下MFC.cpp : Defines the entry point for the application.// #include "stdafx.h" clas ...

  4. WordPress 在Ubuntu下安装插件、主题输入FTP及无法创建目录的问题

    1.安装新主题.插件需要输入FTP的账户密码 如果不想输入的话可以使用在wp-config.php文件中添加脚本方式. define("FS_METHOD","direc ...

  5. DNS绑定多个IP地址

    DNS轮循技术 首先介绍一个DNS系统:传统的DNS解析都是一个域名对应一个IP地址,但是通过DNS轮循技术(负载平衡技术)可以做到一个域名对应到多个IP 上. 这样大家难免就会问,这个技术有什么用呢 ...

  6. mongodb--分片架构【待填的坑】

    首先有一个问题没有搞懂:什么是自动分片?用脚本吗? 一: 多机方式中的另一种方式[分片 => sharding] 分片的对象的谁? 对一个[集合 => 表]进行拆分,把一个大数据拆分成多个 ...

  7. ZOJ 3494

    超级神奇有趣题. AC自动机+数位DP.其实,数位DP在处理含有某些数字时特别不好处理,应该把它倒转为求不含有.这道题把数位DP+AC自动机结合起来,实在是很巧妙,把数字变为串来处理,强大! 要使用A ...

  8. oracle批量更新

    oracle批量更新 学习了:http://blog.csdn.net/zkcharge/article/details/50855755 statement.addBatch(); statemen ...

  9. 链接提交-js代码推送进化版

    百度站长平台提供链接索引的自动提交JS脚本已经有一段时日了.用百度自己的话讲:JS链接推送代码以网页为最小对象,服务于全平台多终端,PC站和移动站均可使用.安装代码的页面在任意平台(浏览器.微信.微博 ...

  10. xcode Could not launch "" ; has denied the launch request

    xcode Could not launch "" ;  “”“ has denied the launch request  (注意,这种方式不能调试) 1.编辑scheme 2 ...