<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			#div1 {

				width: 400px;

				height: 200px;

				border: 1px solid red;

				margin-bottom: 20px;

			}

			#div2 {

				width: 400px;

				height: 200px;

				border: 1px solid blue;

				margin-bottom: 20px;

			}

		</style>

	</head>

	<body>

		<div id="div1" ondragover="dragover(event);" ondrop="drop(event);"></div>

		<div id="div2" ondragover="dragover(event);" ondrop="drop(event);"></div>

		<img id="img1" src="img/user7.jpg" draggable="true" ondragstart="dragstart(event)"/>

		<img id="img2" src="img/user10.jpg" draggable="true" ondragstart="dragstart(event)"/>

		<script>

			/*当开始拖动元素*/

			function dragstart(e) {

				console.log(e.target.id + '拖动开始');

				//在事件对象中存储被拖动元素的id

				e.dataTransfer.setData('objId',e.target.id);

			}

			/*当元素被拖动到当前元素中*/

			function dragover(e) {

				console.log(e.target.id + '：dragover');

				//阻止默认行为（，默认行为就是不让鼠标释放元素到这里）

				e.preventDefault();

			}

			/*当元素被释放到当前元素中事件*/

			function drop(e) {

				console.log(e.target.id + '：drop');

				//阻止默认行为

				e.preventDefault();

				//获得当前被拖动元素的id

				var id = e.dataTransfer.getData('objId');

				//获得被拖动元素的对象

				var obj = document.getElementById(id);

				//在当前元素中插入被拖动元素

				if (e.target.nodeName == 'DIV')

					e.target.appendChild(obj);

			}

		</script>

	</body>

</html>

　　

h5-17-元素拖放的更多相关文章

  1. HTML5 元素拖放

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

  2. Selenium常用操作汇总二——如何把一个元素拖放到另一个元素里面(转)

    Q群里有时候会有人问,selenium  webdriver怎么实现把一个元素拖放到另一个元素里面.这一节总一下元素的拖放. 下面这个页面是一个演示拖放元素的页面,你可以把左右页面中的条目拖放到右边的 ...

  3. html5实现本页面元素拖放和本地文件拖放

    HTML5拖放 拖放本地数据   1.HTML拖放 拖放(Drag 和 Drop)是HTML5标准的组成部分 2.拖放开始: ondragStart:调用了一个函数,drag(event),它规定了被 ...

  4. html5如何实现元素拖放

    html5如何实现元素拖放 一.总结 一句话总结:参考文档里面有各种想象不到的好东西.一边允许拖放,一边接收拖放,一边传递数据,一边接收数据.拖放过程还要防止拖放以默认方式(链接)打开. 1.html ...

  5. Appium Inspector定位Webview/H5页面元素

    目录 操作步骤 Python操作该混合App代码 Appium在操作混合App或Android App的H5页面时, 常常需要定位H5页面中的元素, 传统方式是 翻墙 + 使用Chrome://ins ...

  6. selenium webdriver学习（十）------------如何把一个元素拖放到另一个元素里面(转)

    selenium webdriver学习(十)------------如何把一个元素拖放到另一个元素里面 博客分类: Selenium-webdriver 元素拖放drag and drop  Q群里 ...

  7. 03.Web大前端时代之：HTML5+CSS3入门系列~H5功能元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...

  8. h5交互元素details标签

    details是h5新增的交互元素,details与 summary 标签配合使用可以为 details 定义标题.默认情况下,不显示 details 标记中的内容.当用户点击标题时,会显示出 det ...

  9. Chrome调试模式获取App混合应用H5界面元素

    原文章地址http://blog.csdn.net/qq_19636353/article/details/53731254 浏览器的远程调试工具,使得我们可以通过PC上开启的控制台,调试手机浏览器中 ...

  10. HTML5元素拖放设置总结

    将元素图片放入div盒子内 1.首先设置元素为可拖放:在img标签内加入draggable=”true”. <img draggable="true"> 2.设置元素的 ...

随机推荐

  1. Boost源代码学习---weak_ptr.hpp

    weak_ptr是辅助shared_ptr的智能指针. 就像它的名字一样.是个"弱"指针:仅有几个接口.仅能完毕非常少工作.它能够从一个shared_ptr或weak_ptr对象构 ...

  2. 你的以太网速度足够快吗？四种更快的速度正在路上&#183;&#183;&#183;&#183;&#183;&#183;

    以太网的未来将远远超越下一个最快速度:为无处不在的网络协议绘制路径的网络project师们正在寻找新版本号来服务于各种应用程序. 在上周六的以太网联盟(一个行业组织,用于促进IEEE以太网标准)会议上 ...

  3. Axure Base 01

    名词解释: 线框图:一般就是指产品原型,比如:把线框图尽快画出来和把原型尽快做出来是一个意思. axure元件:也叫axure组件或axure部件,系统自带了一部分最基础常用的,网上也有很多别人做好的 ...

  4. Java，如何获取文件的MD5值

    MessageDigest类封装得很不错,简单易用 不多说,直接上代码 import java.io.FileInputStream;import java.security.MessageDiges ...

  5. javascript数据基本类型和引用类型

    JavaScript基本数据类型: js基本数据类型包括:undefined,null,number,boolean,string.基本数据类型是按值访问的,就是说我们可以操作保存在变量中的实际的值. ...

  6. 百度自然语言处理api用法

    def words url = "https://aip.baidubce.com/rpc/2.0/nlp/v1/lexer?access_token=1111111" param ...

  7. 恢复MySQL数据库删除的数据

    在日常运维工作中,对于数据库的备份是至关重要的!数据库对于网站的重要性使得我们对 MySQL 数据库的管理不容有失!然而是人总难免会犯错误,说不定哪天大脑短路了,误操作把数据库给删除了,怎么办? 下面 ...

  8. JVM Safepoint 安全点

    一.什么是安全点: 在可达性分析算法中查找存活的对象,首先要找到哪些是GC Roots: 有两种查找GC Roots的方法: 一种是遍历方法区和栈区来查找(保守式GC): 一种是通过OopMap的数据 ...

  9. HDU3374 String Problem —— 最小最大表示法 + 循环节

    题目链接:https://vjudge.net/problem/HDU-3374 String Problem Time Limit: 2000/1000 MS (Java/Others)    Me ...

  10. flywaydb and sql server

    https://flywaydb.org/documentation/database/sqlserver How Flyway works https://flywaydb.org/getstart ...