Drag to iFrame using jQuery UI Draggable

Question

I have now tested quite a few things, and I understand it's not optimal, but I need drag and drop from main page to an iframe. Both are on the same domain.

I have tested with iframeFix, but either it's not supported in my browser (Chrome) or I do something wrong.

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>

in the iframe:

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

(I use jQuery UI inside the iframe for sortable.)

The script for loading draggable inside the main page:

$(function() {

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

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

I have tested with making overlays etc, but somehow I haven't got it to work.

Is it a way that makes drag and drop from a html page to an iframe work? (In all browsers?)

I do not need jQuery UI draggable if another solution works well.

Answer 1

I found this answer and was able to apply it: jQuery-ui droppable to sortable inside iframe

Here is my 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();
});

The "trick" here is to create the sortable as a target of the connectToSortable option. This returns a selector as needed and the 2 object will be aware of each other.

Note that your iframe should be just plain HTML (do not initialize sortable there or it will misbehave)