使用iFrames在IE中拖放不起作用

因爲所有內容都像嵌入式（Blackboard）一樣嵌入，所以iFrame沒有辦法解決。該頁面在自己的窗口中打開時可以正常工作。但是當在iFrame裏面時，怪癖模式會啓動並且拖放功能會丟失。使用iFrames在IE中拖放不起作用

的HTML代碼：

<table id="terms_container" frame="box" ondrop="drop(event)" ondragover="allowDrop(event)" > 
    <tr ><td style="text-align:center;">Drag each of these items to the correct bin.</td></tr> 
    <tr><td class="box"><hr> 

    <term id="drag1" draggable="true" ondragstart="drag(event)"> 
    float salesTax = .05f;</term> 
    <term id="drag2" draggable="true" ondragstart="drag(event)">char ampersand '&';</term> 
    <term id="drag3" draggable="true" ondragstart="drag(event)">final Max_Players = 4;</term> 
    <term id="drag4" draggable="true" ondragstart="drag(event)">final int MAX_PLAYERS = 10;</term> 

    <term id="drag5" draggable="true" ondragstart="drag(event)">String literal: "Hello World!</term> 
    <term id="drag6" draggable="true" ondragstart="drag(event)">char diamond = Cx74;</term> 
    <term id="drag7" draggable="true" ondragstart="drag(event)">float weight = 124.3;</term> 

    <term id="drag8" draggable="true" ondragstart="drag(event)">long worldPopulation = +6000000000L;</term> 


    </td></tr> 
</table> 
<div id="venn"> 
    <div id="c1" class="circle"> 
    <p>Valid</p> 
    <div id="collection" ondrop="drop(event)" ondragover="allowDrop(event)" class="ans1"></div> 
    </div> 

    <div id="c2" class="circle" > 
    <p>Not Valid</p> 
    <div id="collection" ondrop="drop(event)" ondragover="allowDrop(event)" class="ans2"></div> 
    </div> 

</div> 
     </div> 
    </div>

我的javascript：

<script type="Text/javascript"> 
var count = 0; 
function allowDrop(ev){ 
ev.preventDefault(); 
} 

function drag(ev) 
{ 
ev.dataTransfer.setData("Text",ev.target.id); 
} 

function drop(ev) 
{ 
ev.preventDefault(); 
var thetag = ev.target.nodeName; 
var theanswer = ev.target.className; 
var data=ev.dataTransfer.getData("Text"); 
    if(thetag == "TERM"){ 
    null; 
    } 
    else{ 
    ev.target.appendChild(document.getElementById(data)); 
    checkAnswer(data, theanswer); 
    } 

} 

function checkAnswer(theterm, theiranswer){ 
    var stripped = theterm.replace('drag', ''); 
    var _0xc89b=["","\x62\x6F\x74\x68","\x61\x6E\x73\x31","\x61\x6E\x73\x32"];var theanswers=[_0xc89b[0],_0xc89b[2],_0xc89b[2],_0xc89b[3],_0xc89b[2],_0xc89b[3],_0xc89b[3],_0xc89b[3],_0xc89b[2]]; 
    if(theiranswer == theanswers[stripped]){ 
    count++; 
    $("#"+theterm+" wr").remove(); 
    $('#'+theterm).append(" <r>&#x2713;</r>"); 
    $('#'+theterm).css('cursor', 'default'); 
    $("#"+theterm).droppable({ 
     drop: function(event, ui) { 
     $(this).html($(event.originalTarget).html()); 
     $(ui.draggable).draggable("destroy"); 
     } 
    }); 
    $('#'+theterm).on('dragstart', function(event) { event.preventDefault(); }); 
    } 
    else if(theiranswer=="box"){ 
    null; 
    } 
    else{ 
    $("#"+theterm+" wr").remove(); 
    $('#'+theterm).append(" <wr>&#x2717;</wr>"); 
    } 
    if(count==8){ 
    $('.box').html("<h3 style=\"text-align: center;\">Correct!</h3>"); 
    var isFirefox = typeof InstallTrigger !== 'undefined'; // Firefox 1.0+ 
    if(isFirefox==true){ 
     $('#replay').css("display", "block"); 
     $('#replay').css("margin-top", "200px"); 
     $('#replay').css("margin-left", "44%"); 
    } 
    else{ 
     $('#win').css("display", "block"); 
     restartbutton(); 
    } 
    } 
} 

function restartbutton(){ 
    setTimeout(function() { 
    //$('#win').hide(); 
    $('#replay').css("display", "block"); 
    },2000); 
}

我也宣佈在頭部以下：

<meta http-equiv="X-UA-Compatible" content="IE=8" />

我一直沒能找到任何有效的解決方案，任何建議？

來源

2014-01-23 pedrum golriz

在我已經發現的IFrame中獲取拖放工作的唯一解決方案是聲明content =「IE = 10」（注意IE = 9不起作用）。當然，這要求您的客戶使用IE 10或11，因此它是次優解決方案。

來源

2014-05-13 17:16:35

使用iFrames在IE中拖放不起作用

回答

相關問題