Przeciągnij i upuść klatki krzyżowe użyj html5

Question

Wiem, jak przeciągnąć i upuścić w jednym oknie z html5. Ale jak przeciągać i upuszczać klatki? Oto mój skrypt, który może działać w jednym oknie. Czy ktoś może mi pomóc?

<script> 
    var drag = document.getElementById("drag"); 
    var drop = document.getElementById("drop"); 
    drag.onselectstart = function() { 
     return false; 
    } 
    drag.ondragstart = function (ev) { 
     ev.dataTransfer.effectAllowed = "move"; 
     ev.dataTransfer.setData("text", ev.target.innerHTML); 
    } 

    drag.ondragend = function (ev) { 
     var text = ev.dataTransfer.getData("text"); 
     alert(text); 
     ev.dataTransfer.clearData("text"); 
     return false; 
    } 

    drop.ondragover = function (ev) { 
     ev.preventDefault(); 
     return true; 
    } 

    drop.ondragenter = function (ev) { 
     this.background = "#ffffff"; 

     return true; 
    } 

    drop.ondrop = function (ev) { 

    } 
</script> 

Answer 1

@Nickolay: oh, ok. Jest to przykład pod adresem http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/.

Dodano:

Nie jestem pewien, dlaczego kod OP nie wyszło - może to nie był załadowany w obu ramkach? I zmienił trochę obsługa JavaScript, aby dać więcej wskazówek:

window.onload = function() { 
    var drag = document.getElementById('drag'); 
    var drop = document.getElementById("drop"); 
    if (drag) { 
     drag.style.backgroundColor = '#00ff00'; 
     drag.onselectstart = function() { 
      return false; 
     } 
     drag.ondragstart = function (ev) { 
      ev.dataTransfer.effectAllowed = "move"; 
      ev.dataTransfer.setData("text", ev.target.innerHTML); 
     } 

     drag.ondragend = function (ev) { 
      var text = ev.dataTransfer.getData("text"); 
      alert(text); 
      //ev.dataTransfer.clearData("text"); 
      return false; 
     } 
    } 

    if (drop != null) { 
     drop.style.backgroundColor = '#0000ff'; 

     drop.ondragover = function (ev) { 
      ev.preventDefault(); 
      return false; 
     } 

     drop.ondragenter = function (ev) { 
      this.style.backgroundColor = "#ff0000"; 
      return false; 
     } 

     drop.ondrop = function (ev) { 
      return false; 
     } 
    } 

} 

to działa między iframe i pomiędzy oknami przeglądarki (tylko przetestowanych w Firefoksie 11 i IE9 na Windows 7 x64).

Answer 2

Zmodyfikowałem twój skrypt, aby działał w przypadku, gdy nazwa elementu iframe to "frame1". Sprawdź to teraz.

<script type="text/javascript"> 
window.onload = function() 
{ 
    var drag = document.getElementById("drag"); 
    var drop = frame1.document.getElementById("drop"); 
    drag.draggable = true; 
    drag.onselectstart = function() { 
     return false; 
    } 
    drag.ondragstart = function (ev) { 
     ev.dataTransfer.effectAllowed = "move"; 
     ev.dataTransfer.setData("text", ev.target.innerHTML); 
    } 

    drop.ondragover = function (ev) { 
     ev.preventDefault(); 
     return true; 
    } 

    drop.ondragenter = function (ev) { 
     this.background = "#ffffff"; 

     return true; 
    } 

    drop.ondrop = function (ev) { 
     var data = ev.dataTransfer.getData("text"); 
     drop.innerHTML += data; 
     ev.preventDefault(); 
    } 
} 

Answer 3

Zapoznaj się z samouczkiem dla między ramkami Drag and Drop. Wyjaśnia wymagane zdarzenia i podstawowy przepływ podczas pracy z wieloma ramkami. http://blog.dockphp.com/post/78640660324/cross-browser-drag-and-drop-interface-development-using

Answer 4

W jaki sposób hostowane są elementy iframe? czy właśnie używasz plików html? ponieważ może to potencjalnie stanowić problem.

Utworzyłem kilka plików html z kodem przeciągania i upuszczania w pytaniu, to nie działało, gdy tylko się nawiązywano. Jednak po dodaniu plików do serwera IIS i odwołaniu się do plików za pomocą localhost, zaczął działać.