mirror of https://github.com/RubaXa/Sortable.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.1 KiB
50 lines
1.1 KiB
10 years ago
|
<!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>
|