html5拖拽，要在ondragover阻止這個預設事件,和解決火狐上的相容問題
阿新 • • 發佈：2019-01-24
在火狐上不相容這一套：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } li { list-style: none; width: 100px; height: 50px; background: yellow; margin: 10px; } #con { width: 200px; height: 200px; background: red; margin-left: 200px; } </style> </head> <body> <ul id="list"> <!--游標更改為 圈形狀，表示具備了拖拽的效果--> <li draggable="true">1</li> <li draggable="true">2</li> <li draggable="true">3</li> </ul> <div id="con">拖拽目的地</div> <script> window.onload = function () { var oUl = document.getElementById('list'); var aLi = oUl.getElementsByTagName('li'); var oCon = document.getElementById('con'); for (var i = 0; i < aLi.length; i++) { //開始拖拽 aLi[i].ondragstart = function () { this.style.background = "blue"; } // //拖拽中，持續性觸發 //火狐上有相容問題 // var a = 0; // aLi[i].ondrag = function(){ // a++; // console.log(a); // } //拖拽結束////火狐上有相容問題 aLi[i].ondragend = function () { this.style.background = 'green'; } } //目標元素的拖拽事件 //進入目的地 oCon.ondragenter = function () { this.style.background = 'pink'; } //在目的地上 ，持續觸發 var b = 0; oCon.ondragover = function (ev) { b++; console.log(b); //阻止預設事件 var ev = ev || window.event; ev.preventDefault(); } //離開目的地 oCon.ondragleave = function () { this.style.background = 'orange'; } //在目的地上釋放滑鼠 //ondrop 和ondragleave 是衝突的，想要 ondrop 觸發，必須 在ondragleave之前禁用 ,在 ondragover //將預設事件禁用 oCon.ondrop = function () { alert(666); } } </script> </body> </html>
這一套可以相容火狐：主要是設定ev.dataTransfer.setData('name','lili');這個方法就可以相容火狐，可以
用ev.dataTransfer.getData('name')來獲取傳過來的資料，拖拽購物車就是用這個方法乾的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } li { list-style: none; width: 100px; height: 50px; background: yellow; margin: 10px; } #con { width: 200px; height: 200px; background: red; margin-left: 200px; } </style> </head> <body> <ul id="list"> <!--游標更改為 圈形狀，表示具備了拖拽的效果--> <li draggable="true">1</li> <li draggable="true">2</li> <li draggable="true">3</li> </ul> <div id="con">拖拽目的地</div> <script> window.onload = function () { var oUl = document.getElementById('list'); var aLi = oUl.getElementsByTagName('li'); var oCon = document.getElementById('con'); for (var i = 0; i < aLi.length; i++) { //開始拖拽 aLi[i].ondragstart = function (ev) { this.style.background = "blue"; //設定屬性dataTransfer 兩個引數 1：key 2：value var ev = ev || window.event; ev.dataTransfer.setData('name', 'lili'); } // //拖拽中，持續性觸發 //火狐上有相容問題 // var a = 0; // aLi[i].ondrag = function(){ // a++; // console.log(a); // } //拖拽結束////火狐上有相容問題 aLi[i].ondragend = function () { this.style.background = 'green'; } } //目標元素的拖拽事件 //進入目的地 oCon.ondragenter = function () { this.style.background = 'pink'; } //在目的地上 ，持續觸發 var b = 0; oCon.ondragover = function (ev) { b++; console.log(b); //阻止預設事件 var ev = ev || window.event; ev.preventDefault(); } //離開目的地 oCon.ondragleave = function () { this.style.background = 'orange'; } //在目的地上釋放滑鼠 //ondrop 和ondragleave 是衝突的，想要 ondrop 觸發，必須 在ondragleave之前禁用 ,在 ondragover //將預設事件禁用 oCon.ondrop = function (ev) { //alert(666); //獲取引數 alert(ev.dataTransfer.getData('name')); } } </script> </body> </html>