<!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. 初识跨终端Web

    近期试读了<跨终端Web>这本书的部分章节,既为了拿到书,也为了记录下读后的收获的东西,这会是个非常好的习惯吧. 标题为"初识跨终端Web".对我来说最贴切了,在此之前 ...

  2. bash shell中的特殊用法

    1 ${BASH_SOURCE-$0} 表示当前正在执行的脚本的完整路径. 2 cd -P 以物理路径进入 /usr/localhadoop现在链到/home/houzhizhen/usr/local ...

  3. Axure Base 03

    (三)Axure rp元件的触发事件 l  OnClick(点击时): 鼠标点击事件,除了动态面板的所有的其他元件的点击时触发.比如点击按钮. l  OnMouseEnter(鼠标移入时): 鼠标进入 ...

  4. XMU C语言程序设计实践（4）

    以下实验二选一. 1.使用队列实现迷宫算法,找到最短路径. 2.实现顺序队列和链队列的所有基本操作,InitQueue(&Q):DestroyQueue(&Q):ClearQueue( ...

  5. javascript中基本类型和引用类型的区别分析

    大多数人系统学习过的程序设计语言,在这些语言的学习过程中最早学到的几个要点之一就是值类型和引用类型的区别.下面我们来看一下在 JavaScript 中基本数据类型(Primitive Types)和引 ...

  6. chan

    第一单元:分型.笔.线段 ?1  分型 一.分型.笔和线段所属范畴 缠师在<教你炒股票72:本ID已有课程的再梳理>中对缠论做过这样的说明“本ID的理论,本质上分两部分,一是形态学,二是动 ...

  7. MYSQL进阶学习笔记六：MySQL视图的创建，理解及管理！（视频序号：进阶_14,15)

    知识点七:MySQL视图的创建(14) 视图的定义: 什么是视图: 视图数由查询结果形成的一张虚拟的表. 什么时候要用到视图? 如果某个查询结果出现的非常频繁,也就是,要经常拿这个查询结果来做子查询. ...

  8. html5--6-65 布局4-弹性布局

    html5--6-65 布局4-弹性布局 实例 学习要点 掌握传统布局与CSS3新增弹性布局方式的实现和应用 弹性布局(弹性伸缩布局) 事实上它是一种新类型的盒子模型,也有书上称作弹性伸缩盒布局. 比 ...

  9. LA-5052 (暴力)

    题意: 给[1,n]的两个排列,统计有多少个二元组(a,b)满足a是A的连续子序列,b是B的连续子序列,a,b中包含的数相同; 思路: 由于是连续的序列,且长度相同,可以枚举一个串的子串,找出这个子串 ...

  10. Cocos2d-X对常用Object-C特性的替换

    平台的转换,总是让我们不自觉的去寻找两者的相同处,不过Cocos2d-X的确对很多Object-C的特性进行了模仿性质的封装,使熟悉Object-C的人能够在其中看到很多类似的概念而感到亲切.     ...