Question

我有一个拖放测验模块，似乎适用于Chrome，Internet Explorer＆amp; Opera但由于某种原因没有在FireFox中工作（Safari似乎是浪费时间）。

有人可以向我解释一下我需要添加到我的代码中，这将使FireFox识别出这种编码：

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

混合浏览器支持拖放

0 个答案: