期权记-ETF期权开户导航 期权记是专业的50ETF300ETF期权开户投资交易导航

js原生拖放实例效果详解

拖放目标

  拖放目标是指被拖动的元素松开鼠标时被放置的目标

  拖放源被拖动到拖放目标上时,将依次触发dragenter、dragover和dragleave或drop这四个事件

dragenter

  只要有元素被拖动到放置目标上,触发dragenter事件

dragover

  被拖动的元素在放置目标的范围内移动时,持续触发dragover事件

dragleave

  如果元素被拖出了放置目标,触发dragleave事件

drop

  如果元素被放到了放置目标中,触发drop事件

  [注意]firefox浏览器的drop事件的默认行为是打开被放到放置目标上的URL。为了让firefox支持正常的拖放,还要取消drop事件的默认行为

  默认情况下,目标元素是不允许被放置的,所以不会发生drop事件。只要在dragover和dragenter事件中阻止默认行为,才能成为被允许的放置目标,才能允许发生drop事件。此时,光标变成了允许放置的符号

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  <style type="text/css">  	#hj{  	width: 500px;	  	height: 300px;		  	/*margin-top: 100px;*/  	margin: 100px auto;  	border: 1px solid darkcyan;  	}  </style>  </head>  <body>  	<div id="hj">  <div id="test"  draggable="true" style="height:30px;width:200px;background:pink;float:left;">点定鼠标把这个元素拖放</div>      <div id="target" style="float:right;height: 200px;width:200px;background:darkgreen">拖放到这里来</div>	  	</div>    <script type="text/javascript">	  var timer,i=0;  var timer1,i1=0;  //兼容IE8-浏览器  test.onmousedown = function(){      if(this.dragDrop){          this.dragDrop();      }  }  test.ondragstart = function(){      this.style.backgroundColor = 'lightgreen';      this.innerHTML = '开始拖动';  }  test.ondrag = function(){      if(timer) return;      timer = setInterval(function(){          test.innerHTML =  '元素已被拖动' + ++i + '秒';      },1000);  }  test.ondragend = function(){      clearInterval(timer);      timer = 0;i =0;      this.innerHTML = '结束拖动';      this.style.backgroundColor = 'pink';  }  target.ondragenter = function(e){      e = e || event;      if(e.preventDefault){          e.preventDefault();      }else{          e.returnValue = false;      }      this.innerHTML = '有元素进入目标区域';      this.style.background = 'red';  }  target.ondragover = function(e){      e = e || event;      if(e.preventDefault){          e.preventDefault();      }else{          e.returnValue = false;      }      if(timer1) return;      timer1 = setInterval(function(){          target.innerHTML =  '元素已进入' + (++i1) + '秒';      },1000);  }  target.ondragleave = function(){      clearInterval(timer1);      timer1 = 0;i1=0;      this.innerHTML = '元素已离开目标区域';      this.style.backgroundColor = 'lightblue';  }  target.ondrop = function(){      clearInterval(timer1);      timer1 = 0;i1=0;      this.innerHTML = '元素已落在目标区域';      this.style.backgroundColor = 'orange';      }  </script>  </body>  </html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

作者:期权小韭菜 分类:网页教程 浏览:
请先 登录 再评论,若不是会员请先 注册