Sortable - Enable portlets (styled divs) as sortables and use the connectWith option to allow sorting between columns.

SUBMITTED BY: jlolk3r

DATE: Jan. 19, 2016, 6:31 a.m.

FORMAT: HTML

SIZE: 2.8 kB

Raw Download

HITS: 1175

Report
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>jQuery UI Sortable - Portlets</title>
  6. <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  7. <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  8. <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  9. <link rel="stylesheet" href="/resources/demos/style.css">
  10. <style>
  11. body {
  12. min-width: 520px;
  13. }
  14. .column {
  15. width: 170px;
  16. float: left;
  17. padding-bottom: 100px;
  18. }
  19. .portlet {
  20. margin: 0 1em 1em 0;
  21. padding: 0.3em;
  22. }
  23. .portlet-header {
  24. padding: 0.2em 0.3em;
  25. margin-bottom: 0.5em;
  26. position: relative;
  27. }
  28. .portlet-toggle {
  29. position: absolute;
  30. top: 50%;
  31. right: 0;
  32. margin-top: -8px;
  33. }
  34. .portlet-content {
  35. padding: 0.4em;
  36. }
  37. .portlet-placeholder {
  38. border: 1px dotted black;
  39. margin: 0 1em 1em 0;
  40. height: 50px;
  41. }
  42. </style>
  43. <script>
  44. $(function() {
  45. $( ".column" ).sortable({
  46. connectWith: ".column",
  47. handle: ".portlet-header",
  48. cancel: ".portlet-toggle",
  49. placeholder: "portlet-placeholder ui-corner-all"
  50. });
  52. $( ".portlet" )
  53. .addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
  54. .find( ".portlet-header" )
  55. .addClass( "ui-widget-header ui-corner-all" )
  56. .prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");
  58. $( ".portlet-toggle" ).click(function() {
  59. var icon = $( this );
  60. icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
  61. icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
  62. });
  63. });
  64. </script>
  65. </head>
  66. <body>
  68. <div class="column">
  70. <div class="portlet">
  71. <div class="portlet-header">Feeds</div>
  72. <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  73. </div>
  75. <div class="portlet">
  76. <div class="portlet-header">News</div>
  77. <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  78. </div>
  80. </div>
  82. <div class="column">
  84. <div class="portlet">
  85. <div class="portlet-header">Shopping</div>
  86. <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  87. </div>
  89. </div>
  91. <div class="column">
  93. <div class="portlet">
  94. <div class="portlet-header">Links</div>
  95. <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  96. </div>
  98. <div class="portlet">
  99. <div class="portlet-header">Images</div>
  100. <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  101. </div>
  103. </div>
  106. </body>
  107. </html>
comments powered by Disqus