Drag iFrame mit jQuery UI Ziehbare

Question

Ich habe jetzt schon einige Dinge getestet, und ich verstehe es nicht optimal ist, aber ich brauche per Drag & Drop aus dem Haupt Seite zu einem iframe. Beide sind auf der gleichen Domain.

Ich habe mit iframeFix getestet, aber entweder wird es nicht in meinem Browser (Chrome) unterstützt oder ich mache etwas falsch.

http://api.jqueryui.com/draggable/#option-iframeFix

<div id="mycontainer" class="mycontainer"> 
    <iframe id="iframewindow" src="./child.html" frameborder="0" width="100%" height="100%"></iframe> 
</div> 

im iframe: (. Ich benutze jQuery UI innerhalb des iframe für sortierbar)

<div id="sortable"> 
    <div class="portlet"> 
    some content 
    </div> 
</div> 

Das Skript für innerhalb der Hauptseite ziehbar Laden:

$(function() { 

    $(".draggable").draggable({ 
     connectToSortable: "#sortable", 
     helper: "clone", 
     iframeFix: true, 
     helper: function(event) { 
      return "<div class='custom-helper'>I move this</div>"; 

     }, 
     revert: "invalid", 
    }); 
    $().disableSelection(); 
)}; 

Ich habe mit Overlays usw. getestet, aber irgendwie habe ich es nicht zur Arbeit bekommen.

Ist es eine Möglichkeit, Drag & Drop von einer HTML-Seite zu einem Iframe zu machen? (In allen Browsern?)

Ich brauche keine jQuery UI ziehbar, wenn eine andere Lösung gut funktioniert.

Answer 1

fand ich diese Antwort und war in der Lage, sie anzuwenden: jQuery-ui droppable to sortable inside iframe

Hier ist meine Fiddle: https://jsfiddle.net/Twisty/gkxe8vpy/4/

HTML

<div id="mycontainer" class="mycontainer"> 
    <iframe id="iframewindow" src="" frameborder="0" width="100%" height="100%"></iframe> 
</div> 

<div id="draggable" class="ui-state-highlight">Drag Me</div> 

JavaScript

/** 
* Code to populate iFrame, mimics actual SRC 
*/ 
var frameHTML = "<div id='sortable'><div class='portlet'>some content</div></div>"; 

var $iframe = $("#iframewindow"); 
$iframe.ready(function() { 
    $iframe.contents().find("body").html(frameHTML); 
}); 
/** 
* End of iFrame code 
*/ 
$(function() { 
    $("#draggable").draggable({ 
    connectToSortable: $iframe.contents().find("#sortable").sortable({ 
     items: "> div", 
     revert: true, 
    }), 
    helper: "clone", 
    iframeFix: true, 
    helper: function(event) { 
     return "<div class='custom-helper'>I move this</div>"; 
    }, 
    revert: "invalid" 
    }); 
    $iframe.contents().find("#sortable").disableSelection(); 
}); 

Der "Trick" ist hier, das sortierbar als Ziel der connectToSortable Option zu erstellen. Dies gibt einen selector nach Bedarf zurück und das Objekt wird sich gegenseitig kennen.

Beachten Sie, dass Ihre iframe einfach nur HTML (nicht initialisieren sortierbar dort oder es wird schlecht benehmen) sein sollte