Javascript 混合浏览器支持拖放
我有一个拖放测验模块，它似乎可以在Chrome、Internet Explorer和Opera中使用，但由于某些原因，它不能在FireFox中使用（Safari似乎是在浪费时间） 有人能解释一下我需要在代码中添加什么才能让FireFox识别这种编码吗Javascript 混合浏览器支持拖放,javascript,html,drag-and-drop,Javascript,Html,Drag And Drop,我有一个拖放测验模块，它似乎可以在Chrome、Internet Explorer和Opera中使用，但由于某些原因，它不能在FireFox中使用（Safari似乎是在浪费时间） 有人能解释一下我需要在代码中添加什么才能让FireFox识别这种编码吗 <html> <head> <meta charset="UTF-8"> <style> .pillHole {width:80px; height:40px;
<html>
<head>
<meta charset="UTF-8">
<style>
.pillHole {width:80px;
height:40px;
border:1px solid #c8c8c8;
border-radius:20px;
background-color:#ededed;
-webkit-user-drop: element;}
.dropBox {width:130px;
height:130px;
border:3px solid #dfdfdf;
border-radius:20px;
margin:5px 0px 0px 5px;
padding:3px;
background:#efefef;}
.textBox {width:130px;
height:76px;
line-height:50px;
font-size:14px;
text-align:center;
color:#000;}
.pill {width:80px;
height:40px;
border:1px solid #dcdcdc;
border-radius:20px;
background-color:#dfdfdf;
line-height:38px;
font-size:14px;
text-align:center;
color:#000;
cursor: move;
-webkit-user-drag: element;
-webkit-user-select: none;}
</style>
<script>
function allowDrop(ev)
{ev.preventDefault();}
function drag(ev)
{ev.dataTransfer.setData("Text", ev.target.id);
objctRfrnc = ev.target.id;
var trgtRfrncO = document.getElementById(ev.srcElement.id).parentNode.id;
console.log("lift zone = ", trgtRfrncO);
console.log("drag element = ", objctRfrnc);}
function drop(ev)
{ev.preventDefault();
ev.target.appendChild(document.getElementById(ev.dataTransfer.getData("Text")));
var trgtRfrncN = document.getElementById(ev.srcElement.id).getAttribute("id");
console.log("drop zone = ", trgtRfrncN);}
</script>
</head>
<body>
<title>Form Explorer</title>
<center>
<br>
<h1>Drag and Drop Test</h1>
<div id="drpTrgtA01"
class="pillHole"
ondrop="drop(event)"
ondragover="allowDrop(event)"
style="margin:5px 0px 0px 5px">
<button type="button"
id="drgObj"
class="pill"
draggable="true"
ondragstart="drag(event)">Object</button>
</div>
<br>
<div class="dropBox"
id="BoxA1"
style="border:3px solid #dfdfdf">
<div class="textBox"
style="margin-top:10px">Drop Zone</div>
<center>
<div class="pillHole"
id="drpTrgtQ01"
style="margin-top:-2px"
ondrop="drop(event)"
ondragover="allowDrop(event)">
</div>
</center>
</div>
</center>
</body>
</html>
.柱孔{宽度：80px；
高度：40px；
边框：1px实心#c8c8c8；
边界半径：20px；
背景色：#ededed；
-webkit用户drop:element；}
.dropBox{宽度：130px；
高度：130像素；
边框：3px实心#dfdfdf；
边界半径：20px；
保证金：5px 0px 0px 5px；
填充：3倍；
背景：#efefef；}
.textBox{宽度：130px；
高度：76px；
线高：50px；
字体大小：14px；
文本对齐：居中；
颜色：#000；}
.药丸{宽度：80px；
高度：40px；
边框：1px实心#DCDC；
边界半径：20px；
背景色：#dfdfdf；
线高：38px；
字体大小：14px；
文本对齐：居中；
颜色：#000；
光标：移动；
-webkit用户拖动：元素；
-webkit用户选择：无；}
功能allowDrop（ev）
{ev.preventDefault（）；}
功能阻力（ev）
{ev.dataTransfer.setData（“Text”，ev.target.id）；
objctRfrnc=ev.target.id；
var trgtRfrncO=document.getElementById（ev.srcElement.id）.parentNode.id；
控制台日志（“提升区=”，trgtRfrncO）；
log（“drag element=，objctRfrnc）；}
功能下降（ev）
{ev.preventDefault（）；
appendChild（document.getElementById（ev.dataTransfer.getData（“文本”））；
var trgtRfrncN=document.getElementById（ev.srcElement.id）.getAttribute（“id”）；
log（“drop zone=，trgtRfrncN）；}
表单浏览器
拖放试验
对象
下降区