H5拖放操作。

最新推荐文章于 2022-12-23 11:35:38 发布

林中明月间。

最新推荐文章于 2022-12-23 11:35:38 发布

阅读量188

点赞数

分类专栏： Html+Css+Js JavaScript

JavaScript 同时被 2 个专栏收录

120 篇文章 9 订阅

订阅专栏

Html+Css+Js

55 篇文章 3 订阅

订阅专栏

<style>
	li{
		width: 100px;
		height: 30px;
		background: yellow;
		margin: 10px;
		list-style: none;
	}
	#div1{
		width: 100px;
		height: 100px;
		background: red;
		margin: 200px;
	}

</style>
<body>
<!-- 
	拖拽元素事件：
	ondrag:开始结束连续触发
	ondragstart：拖拽开始
	ondragend：拖拽结束

	目标元素事件：
	事件对象为目标元素
	ondragenter:进入目标元素触发，相对于mouseover
	ondragover:进去目标、离开目标之间，连续触发
	ondragleave:离开目标元素触发，相对于mouseout
	ondrop:在目标元素上释放鼠标触发
 -->
	<ul>
	<!-- 拖拽元素 -->
		<li draggable="true">a</li>
		<li draggable="true">b</li>
		<li draggable="true">c</li>
	</ul>
	<div id="div1"></div>
	<script type="text/javascript">
	var lis = document.getElementsByTagName('li');
	var ODiv = document.getElementById('div1'); 
	for (var i = 0; i < lis.length; i++) {
		lis[i].ondragstart = function(){
			this.style.background = 'green';
		}
		lis[i].ondragend = function(){
			this.style.background = 'yellow';
		}
	};
	ODiv.ondragenter = function(){
		this.style.background = 'blue';
	}
	ODiv.ondragover = function(event){
		//要想触发ondrop事件就必须在ondragover中阻止默认事件
		event.preventDefault();
		this.style.background = 'red';
	}
	ODiv.ondrop = function(){
		alert(123);
	}

	//火狐下的
	for (var i = 0; i < lis.length; i++) {
		lis[i].ondragstart = function(ev){
			var ev = ev || window.event;
			ev.dataTransfter.setData('name','heo');
			this.style.background = 'green';
		}
		ODiv.ondrop = function(ev){
			alert(ev.dataTransfter.getData('name'));
		}
	};
	</script>
</body>