H5的拖曳效果示例

利用H5新增的draggable和ondrag*事件可以用简单的代码完成拖曳事件:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>H5的拖拽效果实例</title>
</head>
<style>
	#box{
		height: 200px;
		width: 200px;
		border: 1px solid orange;
		float: left;
	}
	
	#con{
		height: 200px;
		width: 200px;
		border: 1px solid green;
		margin: 0;
		padding: 0;
		float: left;
	}
	li{
		height: 30px;
		width: 200px;
		background-color: #abcdef;
		list-style: none;
		text-align: center;
		margin: 10px 0;
	}
</style>
<body>
	<div id="box"></div>
	<ul id="con">
		<li>哲学</li>
		<li>汉堡包</li>
		<li>肉夹馍</li>
		<li>代码</li>
	</ul>
</body>
<script>
	var box = document.getElementById('box');
	var con = document.getElementById('con');
	var lis = document.getElementsByTagName('li');

	for (var i = 0; i < lis.length; i++) {
		lis[i].draggable = true; //每个li都设置可拖拽属性
		lis[i].flag = false;

		lis[i].ondragstart = function(){
			this.flag = true; //鼠标拖拽li时设置flag为true
		}
		lis[i].ondragend = function(){
			this.flag = false;
		}
	};

	box.ondragenter = function(e) {
		// e.preventDefault();
	}

	box.ondragover = function(e) {
		e.preventDefault(); //阻止默认事件,否则不会触发ondrop事件
	}

	box.ondragleave = function(e) {
		// e.preventDefault();
	}

	box.ondrop = function(e) {
		// e.preventDefault();

		for (var i = 0; i < lis.length; i++) {
			if(lis[i].flag){ //如果flag为真,则添加一个li至box里
				box.appendChild(lis[i]);
			}
		};
	}


	con.ondragenter = function(e) {
		// e.preventDefault();
	}

	con.ondragover = function(e) {
		e.preventDefault(); //阻止默认事件,否则不会触发ondrop事件
	}

	con.ondragleave = function(e) {
		// e.preventDefault();
	}

	con.ondrop = function(e) {
		// e.preventDefault();

		for (var i = 0; i < lis.length; i++) {
			if(lis[i].flag){ //如果flag为真,则添加一个li至box里
				con.appendChild(lis[i]);
			}
		};
	}


</script>
</html>

上面的示例,可以使li在box和con之间自由拖拽移动。

H5的拖曳效果示例_第1张图片

你可能感兴趣的:(JavaScript,html,html5,拖拽)