index.html 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>IFrame playground</title>
  6. </head>
  7. <body>
  8. <!-- Latest compiled and minified CSS -->
  9. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
  10. <!-- Latest Sortable -->
  11. <script src="../../Sortable.js"></script>
  12. <!-- Simple List -->
  13. <div id="simpleList" class="list-group">
  14. <div class="list-group-item">This is <a href="http://rubaxa.github.io/Sortable/">Sortable</a></div>
  15. <div class="list-group-item">It works with Bootstrap...</div>
  16. <div class="list-group-item">...out of the box.</div>
  17. <div class="list-group-item">It has support for touch devices.</div>
  18. <div class="list-group-item">Just drag some elements around.</div>
  19. </div>
  20. <script>
  21. (function () {
  22. Sortable.create(simpleList, {group: 'shared'});
  23. var iframe = document.createElement('iframe');
  24. iframe.src = 'frame.html';
  25. iframe.width = '100%';
  26. iframe.onload = function () {
  27. var doc = iframe.contentDocument,
  28. list = doc.getElementById('listWithHandle');
  29. Sortable.create(list, {group: 'shared'});
  30. };
  31. document.body.appendChild(iframe);
  32. })();
  33. </script>
  34. </body>
  35. </html>