Revision 842

Date:
2022/08/05 12:08:41
Author:
ahitrov
Revision Log:
Section items drag-n-drop sorting for _sorted sections.

Files:

Legend:

 
Added
 
Removed
 
Modified

  • utf8/core/comps/contenido/components/section_browse.msn

     
    1 1 <style>
    2 2 .section-content tr.disabled { background:#f0f0f0; }
    3 3 .section-content tr.disabled td.actions a { display:none; }
    4
    4 .drag-over td { background:#f0f0f0; padding-bottom:10px; }
    5 .hide { display:none; }
    5 6 </style>
    6 7 <script type="text/javascript">
    7 8 <!--
    … …  
    145 146 }
    146 147
    147 148 $(document).ready(function(){
    149 % if ( $section->_sorted() ) {
    148 150 $('.move-up').on('click', function( ev ){
    149 151 ev.preventDefault();
    150 152 var $nID = $(this).data('id');
    … …  
    180 182 }
    181 183 });
    182 184 });
    185 % }
    183 186
    184 187 % foreach my $class ( keys %document_classes ) {
    185 188 % my $class_name = $class;
    … …  
    197 200 % }
    198 201 % }
    199 202 % }
    203 % if ( $section->_sorted() ) {
    204
    205 $dataRows = $('.data-row').each(function( index ) {
    206 $( this )[0].addEventListener('dragstart', dragStart);
    207 $( this )[0].addEventListener('dragenter', dragEnter);
    208 $( this )[0].addEventListener('dragover', dragOver);
    209 $( this )[0].addEventListener('dragleave', dragLeave);
    210 $( this )[0].addEventListener('drop', dragDrop);
    211 });
    212 function dragEnter(e) {
    213 e.preventDefault();
    214 $row = $(e.target).closest('tr');
    215 $row.addClass('drag-over');
    216 }
    217 function dragOver(e) {
    218 e.preventDefault();
    219 $row = $(e.target).closest('tr');
    220 $row.addClass('drag-over');
    221 }
    222 function dragLeave(e) {
    223 e.preventDefault();
    224 $row = $(e.target).closest('tr');
    225 $row.removeClass('drag-over');
    226 }
    227 function dragStart(e) {
    228 $row = $(e.target).closest('tr');
    229 e.dataTransfer.setData('text/plain', $row.attr('id'));
    230 }
    231 function dragDrop(e) {
    232 e.preventDefault();
    233 $target = $(e.target).closest('tr');
    234 $target.removeClass('drag-over');
    235 rowID = e.dataTransfer.getData('text/plain');
    236 $source = $('#' + rowID);
    237
    238 sourceID = $source.data('id');
    239 targetID = $target.data('id');
    240 if ( sourceID == targetID ) {
    241 return;
    242 }
    243 $.ajax({
    244 'url' : '/contenido/ajax/document_move.html',
    245 'data' : { 's' : <% ref $section ? $section->id : 0 %>, 'id' : sourceID, 'move' : 'after', 'aid' : targetID },
    246 'dataType' : 'json',
    247 'success' : function( data ){
    248 if ( data.error ) {
    249 alert( data.error );
    250 } else if ( data.after ) {
    251 $source.detach().insertAfter($target);
    252 console.log('Moved after ' + data.after);
    253 }
    254 }
    255 });
    256
    257
    258 }
    259 % }
    200 260 });
    201 261 //-->
    202 262 </script>

  • utf8/core/comps/contenido/components/section_browse_row.msn

     
    1 1 % unless ( $no_tr ) {
    2 <tr valign="top" id="row-<% $document->id %>">
    2 <tr valign="top" class="data-row" id="row-<% $document->id %>" data-id="<% $document->id %>" <% $section->_sorted() ? 'draggable="true"' : '' %>>
    3 3 % }
    4 4 <td nowrap>\
    5 5 % if ($document_access == 2) {

  • utf8/core/comps/contenido/sections.html

     
    1 <!DOCTYPE html>
    1 2 <& "/contenido/components/header.msn" &>
    2 3 <& "/contenido/components/naviline.msn", sect_id => $owner->id &>
    3 4