2014-01-23 3 views
0

iFrame 주변에는 모든 콘텐츠가 포함되어 있으므로 (칠판) 방법이 없습니다. 자체 창에서 열면 페이지가 제대로 작동합니다. 그러나 iFrame 내부에서 단점 모드가 시작되고 드래그가 & 인 경우 손실됩니다. iFrame이있는 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> 

내 자바 스크립트 : 내가 찾을 수 없어

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

:

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

나는 또한 머리에 다음과 같이 선언 어떤 해결책이라도, 어떤 제안이라도?

답변

0

지금까지 찾은 IFrame에서 끌어서 놓기를 사용하는 유일한 해결책은 content = "IE = 10"(IE = 9는 작동하지 않음)을 선언하는 것입니다. 물론 이것은 클라이언트가 IE 10 또는 11을 사용해야하므로 차선책입니다.

관련 문제