1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
/* global jQuery ajaxurl draggablePostOrder */
import './index.scss';
( function ( $ ) {
const overlay = $( '<div class="post-order-overlay">' ).appendTo( 'body' );
$( '#the-list' ).sortable( {
items: 'tr',
axis: 'y',
cursor: 'move',
// @see https://stackoverflow.com/a/57611747/6114451
start( e, ui ) {
const $originals = ui.helper.children();
ui.placeholder.children().each( function ( index ) {
$( this ).width( $originals.eq( index ).width() );
$( this ).height( $originals.eq( index ).height() );
} );
},
helper( e, tr ) {
const $helper = tr.clone();
const $originals = tr.children();
$helper.children().each( function ( index ) {
$( this ).width( $originals.eq( index ).outerWidth( true ) );
} );
return $helper;
},
update() {
// show overlay
overlay.addClass( 'post-order-overlay--visible' );
// update posts
$.post(
ajaxurl,
{
action: 'update-post-order',
nonce: draggablePostOrder.nonce,
page: $( '#current-page-selector' ).val(),
perPage: $( '.screen-per-page' ).val(),
postOrder: $( '#the-list' ).sortable( 'serialize' ),
},
() => {
// hide overlay after updating
overlay.removeClass( 'post-order-overlay--visible' );
}
);
},
} );
} )( jQuery );
|
