H5拖放操作。

<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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值