关闭

h5拖放1

标签: h5拖放
229人阅读 评论(0) 收藏 举报
分类:

02drag img.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		#box{
			width: 500px;
			height: 500px;
			margin: 20px auto;
			background: pink;
		}
	</style>
	<body>
		<div id="box">
			
		</div>
		<img src="images/1.jpg" id="img"  />
	</body>
	<script type="text/javascript">
		//1.获取元素
		
		var img = document.getElementById('img');
		
		var box = document.getElementById('box');
		
		//一共是三个事件  ondragstart 开始拖放 给被拖放的元素  ondragover拖放悬停在某个元素身上  给大盒子
		// ondrop 放置(松开鼠标)  给目标盒子
		
		//2.添加拖放开始事件
		
		img.ondragstart = function(e){
			
			//3.通过event对象保存被拖放元素的数据  ,保存被拖放元素的ID
			
			e.dataTransfer.setData('id',this.id);
			
			
			
		}
		
		//4.给目标盒子添加拖放悬停事件    
		
		box.ondragover = function(e){
			
			//5.通过event对象要阻止浏览器默认行为
			
			e.preventDefault();
			
			
		}
		
		//6.添加投放事件(鼠标松开)
		
		box.ondrop = function(e){
			
			//7.通过event对象获取之前保存的ID数据
			
			var id = e.dataTransfer.getData('id');
			
			//8.通过这个ID找到对应的元素
			
			var elem = document.getElementById(id);
			
			console.log(elem);
			
			//9.把这个被拖放的元素 插入到当前这个盒子里面
			
			this.appendChild(elem);
			
			
			
		}
		
	</script>
</html>


0
0
查看评论

H5拖放API基础篇

不要搞错,本文不是讲如何拖地的。看过《javascript精粹》朋友应该知道,他实现拖放的过程比较复杂,现在时代不同了,我们用H5的新的拖放API就能非常方便的实现拖放效果了。最近在园子见一园友写了一篇《HTML5 进阶系列:拖放 API 实现拖放排序》,真乃大师之作,大~熊同学作为一代菜鸟(不是宗...
  • qq_36648555
  • qq_36648555
  • 2017-11-04 00:04
  • 106

H5 拖放事件详解

H5 拖放事件详解 拖放事件 H5的拖放事件提供了多个接口: 1、drag:当元素或者选中的文本被拖动时触发(每几百毫秒触发一次),应用在被拖拽元素上 2、dragend:当拖动操作结束时触发(通过释放鼠标按钮或者点击转义键),应用在被拖拽元素上 3、dragenter:当一个被拖动的元素...
  • ComeOnZhao
  • ComeOnZhao
  • 2017-04-26 22:47
  • 670

HTML5--拖拽API(含超经典例子)

一、关于拖拽API 拖拽API是HTML5的新特性,相对于其他新特性来说,重要程度占到6成,实际开发中使用比例占到3成,学习要求个人认为是达到掌握即可的程度。 二、什么是拖拽和释放? 拖拽:Drag 释放:Drop 拖拽指的是鼠标点击源对象后一直移动对象不松手,一但...
  • baidu_25343343
  • baidu_25343343
  • 2016-11-18 13:08
  • 15867

深入理解html5拖放

最早在网页中引入JavaScript拖放功能是IE4。当时,网页中只有两种对象可以拖放:图像和某些文本。拖放图像时,把鼠标放到图像上,按住鼠标不放就可以拖放它。拖放文本时,要先选中文本,然后可以像拖放图像一样拖放被选中的文本。在IE4中,唯一有效的放置目标是文本框。到了IE5,拖放功能得到拓展,添加...
  • u013344815
  • u013344815
  • 2016-03-23 22:27
  • 697

H5—拖放

1.HTML5拖放    拖放是HTML5标准的组成部分 2.拖动开始    ondragstart: 调用一个函数,drag(event)它规定了被拖动的数据 3.设置拖动数据    setData():设置被拖数据的数据类型和...
  • qq_35574915
  • qq_35574915
  • 2016-09-06 15:01
  • 99

h5拖放

拖放时h5的标准组成部分,拖放开始执行ondragstart调用一个函数,drag(event),它规定了被拖动的数据;设置拖动数据的数据类型和值使用setData()。ondragover事件规定在何处放置被拖放的数据;ondrop方法实现拖动数据放在哪个位置上。
  • HXAcr
  • HXAcr
  • 2017-10-04 15:56
  • 105

H5 拖放

H5的拖放功能主要是通过drag和drop来实现的
  • sinat_34349564
  • sinat_34349564
  • 2017-03-27 11:57
  • 204

使用H5拖放事件来写一个小程序

1.所有的元素都有一个draggable属性,用于指定是否启动该元素的拖放功能,而/两个元素默认启动拖放<div draggable="true"> innerHTML </div>2.拖放操作相关的事件:被拖动的元素的事件: 1.ondr...
  • qq_27905183
  • qq_27905183
  • 2016-11-04 17:45
  • 405

pc和移动端的js拖拽简易函数(不含html5原生拖拽)

html> html lang="en"> head> meta charset="UTF-8"> meta content="width=device-width, initial-scale=1.0, ma...
  • zuitaibai
  • zuitaibai
  • 2015-11-27 13:48
  • 1038

HTML5元素拖拽drag与拖放drop相关API

其实HTML5就是新增一些有用的API 让我们更轻松的开发 从而把更多精力都放在业务逻辑上来 这些API的使用也非常简单 不过我的记性不太好 所以还是以博客的形式记录下来(手动滑稽) 今天就来写一下这个拖拽API默认拖拽说起拖放,其实最早实现拖放功能的还是IE(IE4) H5就是在IE...
  • q1056843325
  • q1056843325
  • 2017-03-08 21:26
  • 2653
    个人资料
    • 访问:8698次
    • 积分:515
    • 等级:
    • 排名:千里之外
    • 原创:44篇
    • 转载:5篇
    • 译文:0篇
    • 评论:3条
    文章分类
    文章存档