<!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. 编写自定义PE结构的程序(如何手写一个PE，高级编译器都是编译好的PE头部,例如MASM,TASM等，NASM,FASM是低级编译器.可以自定义结构)

    正在学PE结构...感谢个位大哥的文章和资料...这里先说声谢谢 一般高级编译器都是编译好的PE头部,例如MASM,TASM等一直都说NASM,FASM是低级编译器.可以自定义结构但是苦于无人发布相关 ...

  2. 时光轴一之listView实现时光轴效果

    尼玛.非要搞什么时光轴,一想简单的不就是个listView吗,然后一步一步来就好了,哈哈别看那么好看事实上不要想多了. 时光轴timeline最大的作用就是把过去的事物系统化.完整化.精确化.时间轴可 ...

  3. MySQL alter语句

    1:删除列 ALTER TABLE [表名字] DROP [列名称] 2:增加列 ALTER TABLE [表名字] ADD [列名称] INT NOT NULL  COMMENT '注释说明' 3: ...

  4. 配置webpack中externals来减少打包后vendor.js的体积

    在日常的项目开发中,我们会用到各种第三方库来提高效率,但随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白页时间过长,给用户的体验太差.为此我们需要减少vendor.js的体积,从本 ...

  5. vue中使用axios post上传头像/图片并实时显示到页面

    在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码:   <div id="myPhoto ...

  6. 自己封装的Ajax - JavaScript

    1. [代码][JavaScript]代码      //javascript Object: ajax Object//Created By RexLeefunction Ajax(url,data ...

  7. codeforces 460B Little Dima and Equation 解题报告

    题目链接:http://codeforces.com/problemset/problem/460/B 题目意思:给出a, b, c三个数,要你找出所有在 1 ≤ x ≤ 1e9 范围内满足 x =  ...

  8. Watir: 如果安装sougou浏览器，有可能导致Watir不能工作

    如果安装了搜狗,Watir::Browser.new并不一定能打开新的IE浏览器.这种情况下,必须卸载搜狗浏览器,当然,attach,find方法还是可以用的

  9. 虚拟机bridged, NAT and host-only网络区别

    In Linux, a network of each type is created when running vmware-config.pl. In Windows, they are auto ...

  10. 为什么linux有足够的内存还进行swap?

    1.Linux在内存被用完之前开始交换.这是为了提高性能和响应能力: 性能提高是因为一些内存放磁盘缓存比方内存更合适.因此,最好将一个已经停用了一段时间的程序交换出去,而将经常使用的文件保存在缓存中. ...