拖放操作与HTML元素交互-优快云博客

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
		<title>2.5.2接受“放”</title>
	</head>
	<body>
		不过是拖动图片，还是拖动div元素，拖动时都显示了一个“禁止”标志，这表明拖动图片、
		拖动div时，被拖动到“目的地”并不接受被拖动的元素——这是因为当被拖动元素被“拖过”
		document对象时，document对象默认阻止了拖动事件，而其他HTML组件也是位于
		document对象内的，因此它们也不能接受“放”。<br>
		为了让document可以接受“放”，应该为document的ondragover事件指定监听器，在
		监听器中取消document对拖动事件的默认行为。<br>
		eg：
		<div id="dragDiv2" style="width:100px;height:80px;
			border:1px solid black;
			background-color: #f00;"
			draggable="true">疯狂软件教育</div>
		<script type="text/javascript">
			var dragDiv2 = document.getElementById("dragDiv2");
			dragDiv2.ondragstart = function(evt)
			{
				// 让拖动操作携带数据
				evt.dataTransfer.setData("text/plain" , "www.baidu.com");
			}
			
			document.ondragover = function(evt)
			{
				// 取消事件的默认行为
				return false;
			}
		</script>
		<br><br>
		
		当用户把div元素拖到指定位置释放后，Firefox浏览器默认会打开一个新页面，
		页面的URL正式拖放操作所携带的数据。但如果使用Chrome浏览器来浏览该页面，
		当用户把div元素拖到指定位置释放后，Chrome浏览器并没有执行任何默认动作。<br>
		由此可见，不同浏览器对于拖放操作的默认动作并不相同，如果开发者希望取消
		拖放操作的默认动作，则可以为document的ondrop事件绑定监听器。<br>
		eg：
		<div id="dragDiv3" style="width:100px;height:80px;
			border:1px solid black;
			background-color: #00f;"
			draggable="true">疯狂软件教育</div>
		<script type="text/javascript">
			var dragDiv3 = document.getElementById("dragDiv3");
			dragDiv3.ondragstart = function(evt)
			{
				// 让拖动操作携带数据
				evt.dataTransfer.setData("text/plain" , "www.baidu.com");
			}
			
			document.ondragover = function(evt)
			{
				// 取消事件的默认行为
				return false;
			}
			
			document.ondrop = function(evt)
			{
				// 取消事件的默认行为
				return false;
			}
		</script>
		<br><br>
		
		在用户拖放HTML元素的过程中，可能触发如下事件：<br>
		<pre>
事件                	事件源                            描述
ondragstart	被拖动的HTML元素		开始拖动操作时触发该事件
ondrag          被拖动的HTML元素		拖动过程中会不断地触发该事件
ondragend     	被拖动的HTML元素		拖动结束时触发该事件
ondragenter   	拖动时鼠标经过的元素		被拖动的元素进入本元素的范围内时触发该事件
ondragover	拖动时鼠标经过的元素		被拖动的元素进入本元素的范围内拖动时会不断地触发该事件
ondragleave   	拖动时鼠标经过的元素		被拖动的元素离开本元素时触发该事件
ondrop          拖动时鼠标经过的元素		其他元素被放到了本元素中时触发该事件
		</pre>
		<br><br>
		
		eg：实现一个可以自由拖动的div元素：<br>
		<div id="freedrag" style="width:80px;height:80px;
			border:1px solid black;
			background-color: #0f0;"
			draggable="true">疯狂软件教育</div>
		<script type="text/javascript">
			var freedrag = document.getElementById("freedrag");
			freedrag.ondragstart = function(evt)
			{
				// 让拖动操作携带数据
				evt.dataTransfer.setData("text/plain" , "www.baidu.com");
			}
			document.ondragover = function(evt)
			{
				// 取消事件的默认行为
				return false;
			}
			document.ondrop = function(evt)
			{
				freedrag.style.position = "absolute";
				freedrag.style.left = evt.pageX + "px";
				freedrag.style.top = evt.pageY + "px";
				// 取消事件的默认行为
				return false;
			}
		</script>
		
	</body>
</html>