首页 > 代码库 > 每天一个JavaScript实例-html5拖拽

每天一个JavaScript实例-html5拖拽

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>每天一个JavaScript实例-html5拖拽</title>
<style>
#drop{
		width:300px;
		height:200px;
		background-color:#f00;
		padding:5px;
		border:2px solid #000;
	}
#item{
	width:100px;
	height:100px;
	background-color:#ff0;
	padding:5px;
	margin:20px;
	border:1px solid #000;
	}
*[draggable=true]{
	-moz-user-select:none;
	-khtml-user-drag:element;
	cursor:move;
	}
*:-khtml-drag{
		background-color:rgba(238,238,238,0.5);
	}
</style>
<script>

function listenEvent(eventTarget,eventType,eventHandler){
	
	if(eventTarget.addEventListener){
		eventTarget.addEventListener(eventType,eventHandler,false);
		
		}else if(eventTarget.attachEvent){
			eventType = "on" + eventType;
			eventTarget.attachEvent(eventType,eventHandler);
			
			}else{
				eventTarget["on" + eventType] = eventHandler;
			
				}
	}
	
	//取消事件
	function cancelEvent (event){
		console.log("取消事件");
		if(event.preventDefault){
				event.preventDefault();
			}else{
					event.returnValue = http://www.mamicode.com/false;>

每天一个JavaScript实例-html5拖拽