Child pages
  • Sorting Grids Demo

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

...

Panel
bgColorwhite
titleBGColor#c1b7c3
borderStylesolid
titleSorting Grids Demo
borderStylesolid

HTML
<script type="text/javascript" src="http://www.fluidproject.org/releases/1.0/InfusionAll.js"></script>

<style>
.reorderer_container{
  padding: 20px;
  border: 1px dashed red;
  overflow: hidden;
  background-color: #eee;
}
.reorderer_container .flc-reorderer-movable{
  background-color: lightyellow;
  width: 100px;
  height: 50px;
  float: left;
  margin: 0 10px 10px 0;
  text-align: center;
  padding-top: 10px;
}
.reorderer_container .fl-reorderer-movable-default{
  border: 2px solid #ddd;
}
.reorderer_container .fl-reorderer-movable-hover{
  border: 2px solid #666;
}
.reorderer_container .fl-reorderer-movable-dragging{
    background-color: white;
}
.reorderer_container .fl-reorderer-movable-selected{
  border: 2px solid #666;
  background-color: #ddd;
}
.reorderer_container .fl-reorderer-movable-avatar {
    background-color: blue;
    opacity: 0.75;
}
.reorderer_container .fl-reorderer-dropMarker{
  height: 50px !important;
  width: 4px;
  background-color: green;
  float: left;
  margin: 0 10px 10px 0;
}
</style>


HTML
<script type="text/javascript">
  jQuery(document).ready(function () {
        fluid.reorderGrid(".reorderer_container");
  });
</script>
<div class="reorderer_container">
  <div class="flc-reorderer-movable" id="box1">
    <div class="caption">Item 1</div>
  </div>
  <div class="flc-reorderer-movable" id="box2">
    <div class="caption">Item 2</div>
  </div>
  <div class="flc-reorderer-movable" id="box4">
    <div class="caption">Item 4</div>
  </div>
  <div class="flc-reorderer-movable" id="box5">
    <div class="caption">Item 5</div>
  </div>
  <div class="flc-reorderer-movable" id="box6">
    <div class="caption">Item 6</div>
  </div>
</div>