sortable.html.php 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <?php if($extView = $this->getExtViewFile(__FILE__)){include $extView; return helper::cd();}?>
  2. <style>
  3. tbody.sortable > tr.drag-shadow {display: none}
  4. tbody.sortable > tr > td.sort-handler {cursor: move; color: #999;}
  5. tbody.sortable-sorting > tr {transition: all .2s; position: relative; z-index: 5; opacity: .3;}
  6. tbody.sortable-sorting {cursor: move;}
  7. tbody.sortable-sorting > tr.drag-row {opacity: 1; z-index: 10; box-shadow: 0 2px 4px red}
  8. tbody.sortable-sorting > tr.drag-row + tr > td {box-shadow: inset 0 4px 2px rgba(0,0,0,.2)}
  9. tbody.sortable-sorting > tr.drag-row > td {background-color: #E9F2FB!important}
  10. tbody.sortable > tr.drop-success > td {background-color: #cfe0ff; transition: background-color 2s;}
  11. </style>
  12. <script>
  13. $(document).ready(function()
  14. {
  15. $('.sortable:not(tbody)').sortable();
  16. $('tbody.sortable').each(function()
  17. {
  18. var $tbody = $(this);
  19. $tbody.sortable(
  20. {
  21. selector: typeof(sortSelector) == 'undefined' ? 'tr' : sortSelector,
  22. dragCssClass: 'drag-row',
  23. trigger: $tbody.find('.sort-handler').length ? '.sort-handler' : null,
  24. finish: function(e)
  25. {
  26. var orders = {};
  27. e.list.each(function()
  28. {
  29. orders[$(this.item).data('id')] = this.order;
  30. });
  31. e.orders = orders;
  32. $tbody.trigger('sort.sortable', e);
  33. var $thead = $tbody.closest('table').children('thead');
  34. $thead.find('.headerSortDown, .headerSortUp').removeClass('headerSortDown headerSortUp').addClass('header');
  35. $thead.find('th.sort-default .header').removeClass('header').addClass('headerSortDown');
  36. e.element.addClass('drop-success');
  37. setTimeout(function(){e.element.removeClass('drop-success');}, 800)
  38. }
  39. });
  40. });
  41. });
  42. </script>