JQuery - Drag from parent and drop into Iframe child

Question

I want to drag elemets from the parent and then drop it into the iframe child using jquery-ui's draggable and droppable extensions. I used the following codes in parent for implementing that.

$('.some-elements').draggable({
    revert:true,
    iframeFix: true,
    drag:function(event){       
        //code
    },
});

$container  =   $('iframe#id').contents();

$container.find(".drop" ).droppable({
    iframeFix: true,
    greedy: true,
    over:function( event, ui ){
        //code
    },
    drop: function( event, ui ){
        //code
    },
    out:function( event, ui ){
        //code
    }
});

I can drag the items (but get stucked and a lag in dragging) from the prent window and can't drop it into the iframe in right place. I used the jquery-ui in both parent window and the iframe child. Dont know why i can't implement that. Help please.

score 0 · Answer 1 · answered Oct 01 '14 at 05:27

If you want to actually drop the element in the child iframe, I don't think you should be setting revert to true, right? That will only return to element to its original position.

Take a look at the stack snippet below (or this jsfiddle) to see if it did what you want. I was able to drag-and-drop a div into a nested child iframe.

// javascript
$(function() {
  $("#draggable").draggable();
});

/* css */   
#draggable {
  width: 150px;
  height: 50px;
  padding: 0.5em;
  margin-bottom: 20px;
}

<!-- HTML -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div id="parent">
  <div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
  </div>
  <div id="child">
    <iframe></iframe>
  </div>
</div>

JQuery - Drag from parent and drop into Iframe child

1 Answers1