Skip to content

Instantly share code, notes, and snippets.

@remcotolsma

remcotolsma/READMEmd

Last active October 26, 2015 15:19
Show Gist options
  • Save remcotolsma/0e6ab6d4ebd82d8388c4 to your computer and use it in GitHub Desktop.
Save remcotolsma/0e6ab6d4ebd82d8388c4 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery UI Droppable in iframe element
Raw
READMEmd
# jQuery UI Droppable in iframe element
* http://jqueryui.com/draggable/
* http://jqueryui.com/droppable/
* http://stackoverflow.com/a/12171319
Raw
iframe.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="iframe_container" style=" width: 100%; height: 400px; background-color: #0094ff">
</div>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Eisma RSS-tool</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$( function() {
$( 'iframe').load( function() {
var iframe = $( this ).contents();
var container = iframe.find( '#iframe_container' );
container.droppable( {
drop: function ( event, ui ) {
var template = $( ui.draggable ).data( 'template' );
if ( template ) {
var element = $( template ).clone();
element.dblclick( function() {
console.log( element );
} );
$( this ).append( element );
}
}
} );
container.sortable().disableSelection();
} );
$( '.draggable' ).draggable( {
helper: 'clone',
iframeFix: true
} );
} );
</script>
</head>
<body>
<iframe src="iframe.html" width="100%" height="250px"></iframe>
<div class="test" style="width:100px; height:20px; background-color: #000000"></div>
<div class="draggable" style="width:100px; height:20px; background-color: #808080" data-template=".test"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment