Drag & Drop doesn't work in IE with iFrames

Question

There is no way around the iFrame as all the content is embedded like that (Blackboard). The page works fine when opened in its own window. But when inside an iFrame, quirks mode kicks in and the drag&drop-ability is lost.

The HTML code:

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

My 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);
}

I have also declared the following in the head:

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

I haven't been able to find any solution that works, any suggestions?

Answer 1

The only solution to getting drag and drop to work in an IFrame that I have found so far is to declare content="IE=10" (note IE=9 doesn't work). Of course, this requires that your client is using IE 10 or 11, so it is a suboptimal solution.