0

没有办法绕过 iFrame，因为所有内容都是这样嵌入的（黑板）。该页面在其自己的窗口中打开时可以正常工作。但是当在 iFrame 中时，quirks 模式会启动并且拖放功能会丢失。

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

我还没有找到任何可行的解决方案，有什么建议吗？

4

1 回答 1

0

到目前为止，在 IFrame 中进行拖放的唯一解决方案是声明 content="IE=10" （注意 IE=9 不起作用）。当然，这需要您的客户端使用 IE 10 或 11，因此它不是最佳解决方案。

于 2014-05-13T17:16:35.840 回答