IE5에서 HTML5 끌어서 놓기가 작동하지 않습니다.

Question

HTML5 기본 끌어서 놓기가 적용되어, drop은 IE에서 작동하지 않으며 Chrome과 Firefox에서 잘 작동합니다.

IE에서 드래그가 작동하지만 드롭 다운이 발생하지 않습니다.

또 다른 작은 질문 - IE에서 나는 draggable 요소 주위에 반투명 사각형이 있지만 배경은 투명합니다 (이미지는 그런 식으로 처리됩니다). 크롬/파이어 폭스에는 그 사각형이없고 이미지가 보이지 않습니다. 드래그하는 동안 모든 배경.

<div id="4x2" class="dropArea" draggable="false" ondragenter="drag_enter(event); return false;" ondrop="drag_drop(event); return false;" ondragover="return false" ondragleave="drag_leave(event); return false;" data-droppable="true" onmouseover="return mouseOver(this); return false;" onclick="return movePlayer(this); return false;" onmouseout="return mouseOut(this); return false;"> 
</div> 

이 드래그 할 수있는 요소는 다음과 같습니다 :

<div id="player1" draggable="true" ondragstart="drag_start(event); return false;" ondragend="drag_end(event); return false;" data-droppable="false" onclick="return selectPlayer(this); return false;" data-selectable="true"></div> 

function drag_start(e) 
    { 
     e.dataTransfer.effectallowed = 'copy'; 
     e.dataTransfer.dropEffect = 'copy'; 
     e.dataTransfer.setData("text/plain", e.target.getAttribute('id')); 
    } 

function drag_enter(e) { 

     if (e.target.getAttribute('data-droppable') == 'true') { 
      e.target.style.backgroundImage = "url(images/board_cell_background_highlight.png)"; 
     } 

function drag_leave(e) { 

     if (e.target.getAttribute('data-droppable') == 'true') { 
      e.target.style.backgroundImage = "url(images/board_cell_background.png)"; 
     } 


function drag_drop(e) { 
     var element = e.dataTransfer.getData("Text"); // the player 
     if (e.preventDefault) { 
      e.preventDefault(); 
     } 
     if (e.stopPropagation) { 
      e.stopPropagation(); 
     } 
     if (e.target.getAttribute('id') == "player1" || e.target.getAttribute('id') == "player2") { 
      alert("invalid Move"); 
      return false; 
     } 

     e.target.style.backgroundImage = "url(images/board_cell_background.png)"; 
     moveHandler(element, e.target.getAttribute('id')); 
    } 

function drag_end(e) { 
     e.dataTransfer.effectallowed = 'copy'; 
     alert("drop end") 
     } 
    } 
} 

내가 코드를 더 짧게하는 인쇄 재료의 일부 코드를 제거

이

드롭 영역입니다.

Answer 1

text/plain 유형의 데이터를 설정하고 있지만 Text 유형의 데이터를 검색 중입니다. 일부 브라우저는 하나의 브라우저로 이해할 수 있지만 다른 브라우저는 그렇지 않을 수도 있습니다. 이 경우 크롬과 파이어 폭스가 느슨한 반면 인터넷 익스플로러는 현저한 것처럼 보인다.

개인적으로는 Text을 사용하는 것이 좋습니다. 오래된 것일지도 모르겠지만 IE5만큼이나 메모리가 작동하면 이벤트 처리를 약간 조정하면 정상적으로 작동합니다.

Answer 2

문제는 브라우저가 동작을 터치하는 대신 팬 동작을 기본값으로 설정하는 것입니다 ... http://msdn.microsoft.com/en-us/library/ie/dn265022(v=vs.85).aspx에서 CSS의 기본 동작을 제어하는 ​​방법에 대한 정보를 찾으십시오.

Answer 3

누군가가 끌어 IE 8.1 W 단지 인터넷 옵션 보안 탭 11에서에서 삭제하고 체크 표시 상자 보호 모드를 제거하거나

Answer 4

IE10/(11)는 데이터 문자열로 텍스트를 사용하여 관리자로 IE를 실행하지 않는 경우 text/plain을 사용하면 중단됩니다. 텍스트를 사용하는 경우 Firefox에서 텍스트가 손상됩니다.

는 내가 쓸 필요가 무엇 드래그 앤 드롭 기능이 뭔가를 수행하여이 문제를 해결 얻을 :

var setDataString = 'text/html'; 
// We need to change the setDataString type for IE since IE doesn't support setData and getData correctly. 
this.changeDataStringForIe = (function() { 
    var userAgent = window.navigator.userAgent, 
    msie = userAgent.indexOf('MSIE '),  //Detect IE 
    trident = userAgent.indexOf('Trident/'); //Detect IE 11 

    if (msie > 0 || trident > 0) { 
     setDataString = 'Text'; 
     return true; 
    } else { 
     return false; 
    } 
})(); 

내가의 userAgent 스니핑 사용하지 않는 솔루션을 알고 싶어요.