trascina e rilascia cross frame usa html5

Question

So come trascinare e rilasciare in una finestra con html5. Ma come trascinare e rilasciare i frame? Ecco il mio script che può funzionare in una finestra. Qualcuno può aiutarmi?

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

C'è un esempio a http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/.

Aggiunto:

io non so perché il codice del PO non ha funzionato - forse non è stato caricato in entrambi i frame? Ho modificato il loro Javascript un po 'per dare più indicazioni:

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

} 

Si lavora tra iframe e tra le finestre del browser (testato solo in Firefox 11 e IE9 su Windows 7 x64).

Answer 2

Ho modificato lo script per funzionare nel caso in cui il nome dell'iframe sia "frame1". Si prega di controllare ora.

<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

Partenza il tutorial per il drag Croce-Frame and Drop. Spiega gli eventi richiesti e il flusso di base quando si lavora con più fotogrammi. http://blog.dockphp.com/post/78640660324/cross-browser-drag-and-drop-interface-development-using

Answer 4

Come sono ospitati gli ifram? stai solo usando i file html? in quanto questo potrebbe essere il problema.

Ho creato un paio di file html con il codice di trascinamento della domanda, questo non ha funzionato quando ci si riferiva l'un l'altro. Tuttavia, quando ho aggiunto i file al server IIS e ho fatto riferimento ai file utilizzando localhost, ha iniziato a funzionare.