Как сохранить состояние перетаскивания jQuery UI Sortablable Front End Mayout Редактор?
https://wordpress.stackexchange.com/questions/16342
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я строю передний редактор макета Post, используя jQuery UI сортируется.
Сообщения выложены в коробках 300px на 250px на фоновом изображении. Сообщения создаются и отредактированы с помощью администратора WordPress, но я хочу позволить администратору сайтов регулировать порядок полевых ящиков, используя интерфейс перетаскивания и падение на переднем конце.
У меня работает сортируемая часть перетаскивания, но мне нужно придумать способ сохранить состояние (порядок) коробок. В идеале я хотел бы иметь возможность сохранить состояние в качестве опции и встроить его в запрос.
Запрос для сообщений - это простой WP_QUERY, который также получает данные из пользовательских мета -коробок, чтобы определить макет отдельного ящика.:
$args= array(
'meta_key' => 'c3m_shown_on',
'meta_value'=> 'home' );
$box_query = new WP_Query($args); ?>
<ul id="sortable">
<?php
while ($box_query->have_posts()) : $box_query->the_post(); global $post; global $prefix;
$box_size = c3m_get_field($prefix.'box_size', FALSE);
$box_image = c3m_get_field($prefix.'post_box_image', FALSE);
$overlay_class = c3m_get_field($prefix.'overlay_class', FALSE);
if ( c3m_get_field($prefix.'external_link', FALSE) ) {
$post_link = c3m_get_field($prefix.'external_link', FALSE);
} else
{ $post_link = post_permalink();
} ?>
<li class="<?php echo $box_size;?> ui-state-default">
<article <?php post_class() ?> id="post-<?php the_ID(); ?>">
<?php echo '<a href="'.$post_link.'" ><img src="'.esc_url($box_image).'" alt="Image via xxxxx.com" /></a>'; ?>
<div class="post-box <?php echo $overlay_class;?>">
<?php if ( c3m_get_field( $prefix.'text_display', FALSE) ) { ?>
<h2><a href="<?php echo $post_link?>"><?php the_title();?></a></h2>
<p><?php echo substr($post->post_excerpt, 0, 90) . '...'; ?></p>
<?php } ?>
</div>
</article>
</li>
<?php endwhile; ?>
</ul>
</section>
JavaScript - это просто основные инструкции по умолчанию сортировки по умолчанию
jQuery(document).ready(function() {
jQuery("#sortable").sortable();
});
Есть методы, доступные с использованием печенье Чтобы сохранить состояние, но мне также необходимо отключить сортируемое перетаскивание для пользователей, не являющихся администраторами, поэтому мне действительно нужно сохранить в базе данных.
Я ищу самый креативный и пригодный для использования метод и награду 100 -балльную щедрость за лучший ответ.
Обновлять:
я получил Соматические Ответ Работа с одним незначительным изменением.
ajaxurl не возвращает значение на страницах не администрации, поэтому я использовал wp_localize_script( 'functions', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); Чтобы определить значение и изменить строку JavaScript в соответствии с параметрами на:
url: MyAjax.ajaxurl,
Чтобы ограничить доступ к организации заказа только для администраторов, я добавил условную к моей функции wp_enqueue_script:
function c3m_load_scripts() {
if ( current_user_can( 'edit_posts' ) ) {
wp_enqueue_script( 'jquery-ui' );
wp_enqueue_script( 'functions', get_bloginfo( 'stylesheet_directory' ) . '/_/js/functions.js', array( 'jquery', 'jquery-ui' ), false);
wp_localize_script( 'functions', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
}
Я собираюсь сделать немного больше тестирования и отметить этот вопрос как решение и наградить щедрость.
Решение
Брэди прав, что лучший способ справиться menu_order имущество
Вот JQUERY, чтобы сделать список сортировки и передавать данные через AJAX To WordPress:
jQuery(document).ready(function($) {
var itemList = $('#sortable');
itemList.sortable({
update: function(event, ui) {
$('#loading-animation').show(); // Show the animate loading gif while waiting
opts = {
url: ajaxurl, // ajaxurl is defined by WordPress and points to /wp-admin/admin-ajax.php
type: 'POST',
async: true,
cache: false,
dataType: 'json',
data:{
action: 'item_sort', // Tell WordPress how to handle this ajax request
order: itemList.sortable('toArray').toString() // Passes ID's of list items in 1,3,2 format
},
success: function(response) {
$('#loading-animation').hide(); // Hide the loading animation
return;
},
error: function(xhr,textStatus,e) { // This can be expanded to provide more information
alert(e);
// alert('There was an error saving the updates');
$('#loading-animation').hide(); // Hide the loading animation
return;
}
};
$.ajax(opts);
}
});
});
Вот функция WordPress, которая прослушивает обратный вызов AJAX и выполняет изменения в DB:
function my_save_item_order() {
global $wpdb;
$order = explode(',', $_POST['order']);
$counter = 0;
foreach ($order as $item_id) {
$wpdb->update($wpdb->posts, array( 'menu_order' => $counter ), array( 'ID' => $item_id) );
$counter++;
}
die(1);
}
add_action('wp_ajax_item_sort', 'my_save_item_order');
add_action('wp_ajax_nopriv_item_sort', 'my_save_item_order');
Ключ к отображению сообщений в заказах, который вы сохранили, состоит в том, чтобы добавить menu_order Собственность в запросе Args:
$args= array(
'meta_key' => 'c3m_shown_on',
'meta_value'=> 'home'
'orderby' => 'menu_order',
'order' => 'ASC'
);
$box_query = new WP_Query($args);
Затем запустите свой цикл и выведите каждый элемент ... (первая строка - это анимация Core WP загрузка - вы захотите спрятать его изначально через CSS, а затем функция jQuery будет отображаться при обработке)
<img src="<?php bloginfo('url'); ?>/wp-admin/images/loading.gif" id="loading-animation" />
<ul id="sortable">
<li id="{echo post ID here}">{echo title or other name here}</li>
</ul>
Код, вдохновленный Soulsizzle's Отличный учебник.
Другие советы
Далеко не закончен, но идея состоит в том, чтобы отправить запрос Ajax на перетаскивание. Вы также можете запустить запрос AJAX только после нажатия кнопки «Сохранить» или что -то в этом роде. Будет отправлен массив, содержащий идентификаторы поста и новый заказ.
Тогда вам придется обновить сообщения в базе данных в конце сервера. Наконец, добавьте order параметр к вашему WP_Query петля.
Я надеюсь, что это заставит вас начать. Кто -нибудь не стесняйтесь продолжать возиться.
/**
* Enqueue javascript and css files
*/
function uc_enqueue_my_assets() {
wp_enqueue_script( 'jquery-ui-sortable');
wp_register_script( 'order', plugins_url( '/js/order.js', __FILE__ ), array( 'jquery' ) );
wp_enqueue_script( 'order' );
}
function uc_is_user_logged_in()
{
if ( is_user_logged_in()) {
add_action( 'wp_enqueue_scripts', 'uc_enqueue_my_assets' );
add_action( 'admin_enqueue_scripts', 'uc_enqueue_my_assets' );
}
}
add_action('init', 'uc_is_user_logged_in');
/**
* Update order of posts by ajax on trigger of drag and drop event
*/
function uc_sort_post_items() {
$order = wp_parse_id_list(explode(',', $_POST['order']));
write_log($order);
global $wpdb;
$list = join(', ', $order);
$wpdb->query('SELECT @i:=0');
$wpdb->query(
"UPDATE wp_posts SET menu_order = ( @i:= @i+1 )
WHERE ID IN ( $list ) ORDER BY FIELD( ID, $list );"
);
wp_die();
}
add_action('wp_ajax_uc_sort_post_items', 'uc_sort_post_items');
add_action('wp_ajax_nopriv_uc_sort_post_items', 'uc_sort_post_items');
/**
* Display sorted posts
*/
function uc_pre_get_posts( $wp_query ) {
write_log(basename($_SERVER['PHP_SELF']));
$wp_query->set('orderby', 'menu_order');
$wp_query->set('order', 'ASC');
}
add_action( 'pre_get_posts', 'uc_pre_get_posts', 1 );
Javascript file order.js
$('#the-list').sortable({
update: function(event, ui) {
$.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'post',
dataType: 'json',
data:{
action: 'uc_sort_post_items', // Tell WordPress how to handle this ajax request
order: '4567,4569,4565 ' // Passes ID's of list items in 1,3,2 format. Write your own js method to access the list of id from frontend.
},
success: function(data, response) {
console.log(response);
},
error: function(xhr,textStatus,e) {
alert(e);
}
});
}
});
