首页 > 代码库 > html5拖动

html5拖动

2024-10-03 14:35:39   220人阅读

一、draggable属性

如果想要网页上的元素能拖动，则需要把元素的draggable属性设为true 

<div draggable="true">Draggable please</div>

ps:有些浏览器中，a元素和img元素默认是可以拖动的，但最好还是加上该属性。

二、拖动的事件

1.加在拖动元素的事件大概有如下：

（1）dragstart:网页元素开始拖动时触发。

（2）drag:被拖动元素在拖动过程中一直保持触发和被拖动元素或从文件系统选中的文件，拖放落下时触发。

（3）dragend:网页元素拖动结束时触发。

draggableElement.addEventListener(‘dragstart‘,function(e){
   console.log(‘拖动开始！‘);     
});

2.加在目标元素的 事件如下：

（1）dragenter:被拖动的元素进入目标元素时触发。

（2）dragleave:被拖动的元素离开目标元素时触发。

（3）dragover:被拖动元素停留在目标元素时触发。

ps: 这三个事件都要阻止元素的默认行为发生，即调用preventdefault()函数，因为元素本身是不可以放入另一个元素的。

targetElement.addElementListener(‘dragover‘,function(e){
    e.preventdefault();
　　e.stopPropagation();
    console.log(‘停留在目标元素上面‘);
});

拖动过程中，回调函数接受的事件参数，有一个dataTransfer属性。它指向一个对象，包含了与拖动相关的各种信息。

draggableElement.addEventListener(‘dragstart‘,function(event){

event.dataTransfer.setData(‘text‘,‘Hello world!‘);
});

上面代码在拖动开始时，在dataTransfer对象上存储一条文本信息，内容为“hello world!”。当拖动结束时，可以用getData方法取出这条信息。

dataTransfer对象的属性：

  • dropEffect:拖放的操作类型，决定了浏览器如何显示鼠标形状，可能值为copy,move,link和none.
  • effectAllowed：指定所允许的操作，可能的值为copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized（默认值，等同于all，即允许一切操作）。
  • files：包含一个FileList对象，表示拖放所涉及的文件，主要用于处理从文件系统拖入浏览器的文件。
  • types：储存在DataTransfer对象的数据的类型。

 

dataTransfer对象的方法：

  • setData(format, data)：在dataTransfer对象上储存数据。第一个参数format用来指定储存的数据类型，比如text、url、text/html等。
  • getData(format)：从dataTransfer对象取出数据。
  • clearData(format)：清除dataTransfer对象所储存的数据。如果指定了format参数，则只清除该格式的数据，否则清除所有数据。
  • setDragImage(imgElement, x, y)：指定拖动过程中显示的图像。默认情况下，许多浏览器显示一个被拖动元素的半透明版本。参数imgElement必须是一个图像元素，而不是指向图像的路径，参数x和y表示图像相对于鼠标的位置。

dataTransfer对象允许在其上存储数据，这使得在被拖动元素与目标元素之间传送信息成为可能。

 

三、实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>
		html5拖动API
	</title>
	<style type="text/css">
		*{
			margin: 20px;
			padding: 10px;
		}
		#target{
			width: 300px;
			height: 400px;
			background-color: #123456;
		}
		span{
			display: block;
			background-color: #123456;
		}
	</style>
	<script type="text/javascript">
	window.onload=function(){
		var target = document.getElementById(‘target‘);
		var dragElment=document.querySelectorAll("#container span");

		for (var i = 0; i < dragElment.length; i++) {
			dragElment[i].addEventListener(‘dragstart‘,function(e){
				e.dataTransfer.setData(‘text‘,this.innerHTML);
			});
		}
		target.addEventListener(‘dragover‘, function(e) {
  			e.preventDefault();
  			e.dataTransfer.dropEffect = ‘move‘;
		});
		target.addEventListener(‘drop‘,function(e){
			e.preventDefault();
			e.stopPropagation();
			this.innerHTML=‘你选中的是“我爱双妙”中的：‘+e.dataTransfer.getData(‘text‘);
		});
	}
	</script>
</head>
<body>
<div id="container">
	<span draggable="true">我</span>
	<span draggable="true">爱</span>
	<span draggable="true">双妙</span>
</div>
<div id="target"></div>
</body>
</html>

原文：http://www.cnblogs.com/jscode/archive/2013/05/10/3575024.html

html5拖动


联系
我们