设为首页 加入收藏

TOP

Html5拖放(二)
2017-10-13 10:50:10 【大 中 小】 浏览:6149次
Tags：Html5 拖放
}
   
  oDiv2.ondragleave = function(){
  console.log('移除目标元素触发')
  oDiv2.style.borderColor = 'black'
  }
   
  oDiv2.ondragover = function(ev){
  console.log('移入到目标元素后连续触发');
   
  var event = window.event || ev;
  //阻止默认事件
  event.preventDefault()
   
  }
   
  //要想触发ondrop事件，必须在ondragover事件中阻止默认事件
  oDiv2.ondrop = function(){
   
  console.log('在目标元素中释放拖放元素触发')
   
  oDiv2.appendChild(oDiv1)
  }
  </script>
  </body>
  </html>
   

解决火狐浏览器的拖放问题具体代码：

  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
  li{
  list-style: none;
  width: 100px;
  height: 40px;
  margin-top: 10px;
  background: orange;
  }
  div{
  width: 200px;
  height: 200px;
  background: red;
  margin: 0 auto;
  }
  </style>
  </head>
  <body>
  <ul>
  <li draggable="true">1</li>
  <li draggable="true">2</li>
  <li draggable="true">3</li>
  </ul>
  <div></div>
  <script type="text/java script">
   
  var aLi = document.querySelectorAll("li");
  //目标元素事件
  var oDiv = document.querySelector("div");
  //拖放元素事件
  //解决火狐浏览器拖放问题:在开始拖放时设置setData()方法
  for(var i=0;i<aLi.length;i++){
   
  //添加属性，存储下标
  aLi[i].index = i;
   
  aLi[i].ondragstart = function(ev){
  var event = window.event || ev;
  event.dataTransfer.setData('test',this.index+1)
   
  //设置光标样式
  event.dataTransfer.effectAllowed = 'uninitialized';
   
  //设置拖拽样式
  event.dataTransfer.setDragImage(oDiv,100,100)
  }
  }
   
   
   
  oDiv.ondragover = function(ev){
  var event = window.event || ev;
  event.preventDefault();
  }
  //释放元素时弹框
  oDiv.ondrop = function(ev){
   
  var event = window.event || ev;
  var value = event.dataTransfer.getData('test','张三')
  alert(value)
  }
  </script>
  </body>
  </html>
   
首页 上一页 1 2 下一页 尾页 2/2/2
【大 中 小】【打印】 【繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部】
上一篇：获取鼠标坐标并且根据鼠标位置不.. 下一篇：『总结』web前端知识小笔记系列（..

最新文章

前端简介
浅尝https
Turn.js 实现翻书效果(自适应单双页)
console的各种输出格式
浅谈个人对客户端JavaScript同步、..

热门文章

【前端小小白的学习之路】vue学习记..
Bootstrap提示框
前端通用框架可行性研究报告之弹窗
echarts饼图扇区添加点击事件
web前端开发初学者必看的学习路线（..

Hot 文章

【前端小小白的学习之路】vue学习记..
Bootstrap提示框
前端通用框架可行性研究报告之弹窗
echarts饼图扇区添加点击事件
web前端开发初学者必看的学习路线（..

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目