2 files changed, 81 insertions, 0 deletions
diff --git a/library/Sortable/st/iframe/frame.html b/library/Sortable/st/iframe/frame.html
new file mode 100644
index 000000000..677eeef64
--- /dev/null
+++ b/library/Sortable/st/iframe/frame.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+</head>
+<body>
+
+<!-- Latest compiled and minified CSS -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
+
+
+<!-- List with handle -->
+<div id="listWithHandle" class="list-group">
+	<div class="list-group-item">
+		<span class="badge">14</span>
+		<span class="glyphicon glyphicon-move" aria-hidden="true"></span>
+		Drag me by the handle
+	</div>
+	<div class="list-group-item">
+		<span class="badge">2</span>
+		<span class="glyphicon glyphicon-move" aria-hidden="true"></span>
+		You can also select text
+	</div>
+	<div class="list-group-item">
+		<span class="badge">1</span>
+		<span class="glyphicon glyphicon-move" aria-hidden="true"></span>
+		Best of both worlds!
+	</div>
+</div>
+
+</body>
+</html>
diff --git a/library/Sortable/st/iframe/index.html b/library/Sortable/st/iframe/index.html
new file mode 100644
index 000000000..fcd089857
--- /dev/null
+++ b/library/Sortable/st/iframe/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>IFrame playground</title>
+</head>
+<body>
+
+
+<!-- Latest compiled and minified CSS -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
+
+
+<!-- Latest Sortable -->
+<script src="../../Sortable.js"></script>
+
+
+<!-- Simple List -->
+<div id="simpleList" class="list-group">
+	<div class="list-group-item">This is <a href="http://rubaxa.github.io/Sortable/">Sortable</a></div>
+	<div class="list-group-item">It works with Bootstrap...</div>
+	<div class="list-group-item">...out of the box.</div>
+	<div class="list-group-item">It has support for touch devices.</div>
+	<div class="list-group-item">Just drag some elements around.</div>
+</div>
+
+<script>
+	(function () {
+		Sortable.create(simpleList, {group: 'shared'});
+
+
+		var iframe = document.createElement('iframe');
+
+		iframe.src = 'frame.html';
+		iframe.width = '100%';
+		iframe.onload = function () {
+			var doc = iframe.contentDocument,
+					list = doc.getElementById('listWithHandle');
+
+			Sortable.create(list, {group: 'shared'});
+		};
+
+
+		document.body.appendChild(iframe);
+	})();
+</script>
+
+</body>
+</html>