html5学习(鼠标拖拽)

html5鼠标拖拽的效果和案例
温故知新，许久之前写的html5的案例，重新整理了下，算是知识复习和回顾吧！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5学习(鼠标跟随和拖拽)</title>
<link rel="stylesheet" type="text/css" href="../css/inputAndDiv.css">
</head>
<body style="background-color: #CCE8CF;">
<h3>把橘红色方块拖拽进黄色方块中去</h3>
<div id="div1" style="width: 300px;height: 300px;background-color: Khaki;">
</div>
<div draggable="true" id="div2" style="width: 80px;height: 80px;background-color: OrangeRed;">
请拖拽我
</div>
</body>
<script type="text/javascript">
var div1Node = document.getElementById("div1");
var div2Node = document.getElementById("div2");

//在拖放的过程中会触发以下事件：

//在拖动目标上触发事件 (源元素): 
//拖拽区事件
//拖拽开始事件(ondragstart 用户开始拖动元素时触发)
div2Node.ondragstart = function(e) {
	console.log("***拖拽开始***", e, e.target.id);
// 	e.dataTransfer.setData("Text", e.target.id);
//在火狐浏览器下测试
// 	e.dataTransfer.setData("Text", "周杰伦");
// 	e.dataTransfer.setData("null", "");
}

//ondrag 元素正在拖动时触发
div2Node.ondrag = function(e) {
	console.log("***拖拽中***", e);
}

//ondragend 用户完成元素拖动后触发
div2Node.ondragend = function(e) {
	console.log("***拖拽完成***", e);
}

//释放目标时触发的事件: 
//投放区事件
//ondragenter 当被鼠标拖动的对象进入其容器范围内时触发此事件
div1Node.ondragenter = function(e) {
	e.preventDefault();
	console.log("***进入投放区***", e);
// 	div1Node.innerHTML += "***进入投放区***";
	div1Node.style.border = "5px dotted red";
}

//ondragover 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
div1Node.ondragover = function(e) {
	e.preventDefault();
	console.log("***在投放区移动***", e);
// 	div1Node.innerHTML += "***在投放区移动***";
}

//ondragleave 当被鼠标拖动的对象离开其容器范围内时触发此事件
div1Node.ondragleave = function(e) {
	console.log("***离开投放区***", e);
// 	div1Node.innerHTML += "***离开投放区***";
}

//ondrop 在一个拖动过程中，释放鼠标键时触发此事件
div1Node.ondrop = function(e) { 
	console.log("***释放鼠标键***", e);
	console.log("***释放鼠标键***", e, e.dataTransfer.getData("Text"));
// 	div1Node.innerHTML += "***释放鼠标键***";
	div1Node.appendChild(div2Node);
}

</script>
</html>
完！
html5学习(鼠标拖拽)

猜你喜欢
